メニューボタンやプルダウンなど、アニメーションが終わる前に、開閉ボタンを連打すると、
何回もメニューの開閉をしたり、挙動が変わってレイアウトが崩れてしまうなど問題が起きてしまう場合があります。
何回もメニューボタンを押す人は少ないでしょうが、意図した問題が起きないように、
クリック対策をしておくのも必要でしょう。
連打によって連続で動作させたくない場所に .stop(true, false) を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> $(function() { var menu = $('#sideMenu'); $('#sideButton').on('click', function(){ menu.toggleClass('open'); if(menu.hasClass('open')){ menu.stop(true, false).animate({'right' : 0 }, 300); } else { menu.animate({'right' : -menuWidth }, 300), } }); }); </script> |
上記のようにmenu.stop(true, false)を.animateの前に記述することで、連打したとしても、連続でメニューが開閉しないようになります。
コメント