マウスオーバーでアニメーションなどをするために、jQueryのhoverメソッドを使用する場合が多くあります。
その際に、連続でマウスオーバーをするとアニメーションがカーソルを外した後もホバーした分だけ続いてしまう、といった事がありませんか？そんな時の原因と対処法を解説していきます。
hoverメソッドについて
まずは、jQueryのhoverメソッドについての解説です。
このhoverメソッドは、指定した要素にカーソルが重なった時に発動するメソッドとなります。カーソルが重なった時、カーソルが離れた時の処理をまとめて記載する事が可能です。
よく使用される例として、ドロップダウンメニューやツールチップがあります。
そんなhoverメソッドの基本的は構文を以下にまとめます。
$('指定の要素').hover(
function(){
// カーソルが重なった時の処理
},
function(){
// カーソルが離れた時の処理
}
);
$('指定の要素').hover(
function(){
// カーソルが重なった時・離れた時の処理
}
);上記のように、指定の要素にカーソルが重なった時・離れた時の処理を別々に記述するか、一緒の動作の場合省略して記述する事も出来ます。
何度もアニメーション(イベント)が続いてしまう理由
続いて、タイトルにもあるように何度もアニメーション(イベント)が続いてしまう現象についてです。
まずは以下のコードと表示例をご覧ください。
<dl class="menu">
<dt>開閉メニュー</dt>
<dd>コンテンツ内容</dd>
</dl>$('.menu').hover(
function(){
// カーソルが重なった時・離れた時に開閉
$('dd',this).slideToggle();
}
);上記の表示例の「開閉メニュー」部分に何度か連続でカーソルを合わせてみてください。
カーソルを離した後も、カーソルを合わせた分だけ開閉のアニメーションを繰り返しているかと思います。
これは、カーソルを重ねた・離した分だけ、slideToggle()で開閉するといったイベントが発動し、蓄積している為です。次の項目で、その対処方法を詳しく解説していきます。
対処方法
先ほどの、カーソルを重ねた・離した分だけ発動するイベントを制御するには、カーソルが重なった際に「イベントを中断し、新たにイベントを発動する」といった処理が必要となります。
その為には、stopメソッドを使用します。これは、アニメーションを中断するというメソッドで、これを追加するだけで何度も繰り返してしまうといった現象を止める事が出来ます。
まずは、以下の例をご覧ください。
$('.menu').hover(
function(){
// カーソルが重なった時・離れた時に開閉
$('dd',this).stop().slideToggle();
}
);上記の表示例にカーソルを合わせてみてください。
連続でカーソルを合わせてみても正常な動作になっているかと思います。
使用しているstopメソッドにはイベントの削除や完了に関するコールバック関数も用意されていますので、アニメーション(イベント)によっては必要になる場合もあります。その際はコールバック関数を使用してみてください。
さいごに
いかがでしたでしょうか。
今回は、hoverメソッドの連続発動によるアニメーション(イベント)の制御に関するstopメソッドを解説いたしました。
これは、ナビゲーションメニューや開閉メニューによく使用するものとなりますので、覚えておくとスムーズにコーディングが可能になるかと思います。たまに、対応方法を忘れてしまう場合もありますので、その際にはこちらの記事を思い出して参考にしてみてください。
