【jQuery】slideDownとslideUpが何度も繰り返してしまう問題の解決策

今回はオンマウスしたときにslideDownとslideUpで要素を表示するときの問題になります。

slideDownとslideUpを使ったときに何回も表示と非表示を繰り返しまうというときの対処法です。

まずは実際の動きとソースを見てみましょう。

slideDownとslideUpで表示が何度も繰り返す

html

<div class="box">
        <ul>
                <li class="acc">
                        アイテム1
                        <div class="cont">アイテム1の1</div>
                </li>
                <li class="acc">
                        アイテム2
                        <div class="cont">アイテム1の2</div>        
                </li>
        </ul>  
</div> 

jQuery

jQuery('.acc').hover(function () {
	jQuery(this).children('div').slideDown();
}, function () {
	jQuery(this).children('div').slideUp();
});

実際の動き

解決策

上の「アイテム1」を上下に何度もオンマウスしてみてください。

表示と非表示が何度も繰り返されるときがあると思います。

こちらを今回修正したいと思います。

stop()を使う

解決法としては簡単で「.stop()」を使うことで修正できます。

jQuery

jQuery('.hover').hover(function () {
	jQuery(this).children('div').stop(true).slideDown();
}, function () {
	jQuery(this).children('div').stop(true).slideUp();
});

修正結果

これで解決できました。