[jQuery]マウスホバー開閉ナビがアニメーションし続ける問題と解決法

「マウスホバーで開閉するナビをjQueryで作ったものの、カーソルを連続で往復させるとカーソルを止めてもしばらくナビが開閉し続けてしまう」なんて状況に遭遇したことはないでしょうか？

ちょうどこの前そんな状況に遭遇したので、今回はこの問題の解決法に関して原因とともにご紹介したいと思います。

問題のあるパターン

「カーソルを乗せると開き、カーソルを外すと閉じるナビ」なんてものを作ろうとした場合、最初に思いつくのは以下のようなコードかと思います。

ソースコード

$(function() {
  var $subNav = $('.subNav');
  $('.hoverNav').hover(
    function(){
      $subNav.slideDown();
    },
    function(){
      $subNav.slideUp();
    }
  );
});

<div class="hoverNav">
  <p class="mainNav">ホバーで開閉</p>
  <ul class="subNav">
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
    <li class="box">ナビ</li>
  </ul>
</div>

実例

次が上記ソースコードの実例なのですが、「ホバーで開閉」ボタンにカーソルを連続で乗せたり外したりしてみて下さい。

すると、カーソルを止めてもしばらく動き続けるかと思います。

原因

この問題ですが、jQueryは既にアニメーションを実行している時に追加でアニメーションを実行する命令が来た場合、後から来たアニメーションを貯めておいて、今実行しているアニメーションが終わってから実行するという動作をする点が原因となっています。

今回の場合、ボックスを往復する度にアニメーションの実行命令が貯まり、マウスを止めた後も貯まったアニメーションを消化するためにナビが開いたり閉じたりし続けていた、っていう状態ですね。

解決法

以下のようにソースコードを変更すれば解決します。

ソースコード

$(function() {
  var $subNav = $('.subNav');
  $('.hoverNav').hover(
    function(){
      // stop関数を追加
      $subNav.stop().slideDown();
    },
    function(){
      // stop関数を追加
      $subNav.stop().slideUp();
    }
  );
});

実例

解説

slideDown/slideUp関数の直前にstop関数を追加しただけです。

stop関数は現在実行しているアニメーションを停止させる関数なのですが、これを実行してからslideDown/slideUpなどのアニメーション関数を呼び出すと、現在実行しているアニメーションを破棄して、新しく呼ばれたアニメーションを即実行します。

以上

jQueryアニメーションのこの特徴と解決法は、知っておかないとかなり使い勝手の悪いUIが出来上がってしまうことが多々あるので覚えておきましょう！（自戒）

以上、たにっぱでした〜