マウスホバーでスムーズにjQuery.animate()をコントロールする(アーカイブ)

1. そのまま

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

ソースコード

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

2. .stop(true, true)

連続してホバーすると、ぴかぴかしますね！

ソースコード

$('#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)

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

ソースコード

$('#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

キューがたまっている状態で他のブロックにホバーすると、キャンセルします。.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
        })
    });