マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法

jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。

何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。

どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。

で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。

結論は簡単で

• .stop(true, false)を.animate()の前に入れる
• .animate()メソッドのオプション部分でqueue: falseを指定する

のいずれかです。

このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わったりします。実際に動作を見てもらったほうが早いのでサンプルを用意しました。

サンプルと同じように順番に見ていきましょう。

1. そのまま

サンプル1のボックスに連続してホバーしてください。チラチラしますよね。

ソースコード

$('#s1 div.box')
    .hover(function() {
        $(this).animate({
            opacity: .5
        }, {
            duration: 200
        })
    }, function() {
        $(this).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

2. .stop(true, true)

サンプル2のボックスに連続してホバーすると、ぴかぴかしますね！

ソースコード

$('#s2 div.box')
    .hover(function() {
        $(this).stop(true, true).animate({
            opacity: .5
        }, {
            duration: 200
        })
    },function() {
        $(this).stop(true, true).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

3. .stop(true, false)

サンプル3のボックスにキューがたまっている状態で他のブロックにホバーすると、キャンセルします。たぶん一番自然。

ソースコード

$('#s3 div.box')
    .hover(function() {
        $(this).stop(true, false).animate({
            opacity: .5
        }, {
            duration: 200
        })
    }, function() {
        $(this).stop(true, false).animate({
            opacity: 1
        }, {
            duration: 200
        })
    });

4. queue: false

サンプル4のボックスにキューがたまっている状態で他のブロックにホバーすると、キャンセルします。.stop(true, false)と同じ効果。これも自然。

ソースコード

$('#s4 div.box')
    .hover(function() {
        $(this).animate({
            opacity: .5
        },{
            duration: 200,
            queue: false
        })
    }, function() {
        $(this).animate({
            opacity: 1
        }, {
            duration: 200,
            queue: false
        })
    });

簡単にチラチラを回避できるのでぜひ覚えておきましょう！

以下のどちらかですね！今回は.animate()メソッドで紹介してますが、.stop(true, false)はfadeIn(), fadeOut(), fadeTo()にも使えますよ！

• .stop(true, false)を.animate()の前に入れる
• .animate()メソッドのオプション部分でqueue: falseを指定する

• 動作サンプル