0

この質問は、おそらく何よりも構文の問題です。クリックすると画面に出入りするカスタムタブを制御する簡単なコードがあります。ほとんどの場合、コード (特にアニメーション) は意図したとおりに機能し、問題はありません。

<script type="text/javascript">
                    $('.side_drawer_face').click(function() {

                            if ($('#side_drawer').css("left") <= "0"){
                                  $('#overlay_div').show();  
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);

                            } else if ($('#side_drawer').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                            }   else {
                                      document.getElementById('side_drawer').style.zIndex = 6000;
                                      document.getElementById('side_drawer2').style.zIndex = 5000;

                                }

                        });
                    $('.side_drawer_face2').click(function() {
                                //shows Bio div
                            if ($('#side_drawer2').css("left") <= "0"){
                                  $('#overlay_div').show(); 
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
                            } else if ($('#side_drawer2').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);

                            } else {
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;

                            }
                        });
                    $('.clear_overlay').click(function() {

                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                        }); 

                    </script>

私の問題は、一部のブラウザー (I で始まり E で終わる) で、他のページ要素の読み込み中にタブをすばやくクリックすると、予期しない動作が発生することです。私がやりたいのは、スクリプト全体をドキュメント準備ステートメントでラップして、ページ上のすべてが読み込まれるまでどの関数も実行できないようにすることです。(スクリプトは既に html 本文の下部にあります)

4

1 に答える 1

0 
$(document).ready(function() {
                     $('.side_drawer_face').click(function() {

                            if ($('#side_drawer').css("left") <= "0"){
                                  $('#overlay_div').show();  
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);

                            } else if ($('#side_drawer').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                            }   else {
                                      document.getElementById('side_drawer').style.zIndex = 6000;
                                      document.getElementById('side_drawer2').style.zIndex = 5000;

                                }

                        });
                    $('.side_drawer_face2').click(function() {
                                //shows Bio div
                            if ($('#side_drawer2').css("left") <= "0"){
                                  $('#overlay_div').show(); 
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
                            } else if ($('#side_drawer2').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);

                            } else {
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;

                            }
                        });
                    $('.clear_overlay').click(function() {

                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                        }); 

});

Nick と Matt のコメントは正しいです。構文は非常に簡単で、イベント ハンドラをready関数にバインドするだけです。

于 2012-12-03T16:09:14.440 に答える