jquery - アイテムホバーで3秒待ってからfadeTo 0.2これを除くすべてのアイテム

Question

私はjQueryが初めてで、これを実現する必要があります:

アイテムのホバーで 3 秒待ってから、(ホバーされたもの)fadeTo(0.2を除くすべてのアイテムthisとマウスでfadeTo(1)すべてのアイテムを残します。

ここにコードを配置しました：http://jsfiddle.net/f7DJa/ しかし、3秒待たずにスムーズに動作しません。

Answer 1

var items = $('.item', '.loop'); //find all items within loop

items.on({
    mouseenter: function() {
        items.not(this).stop(true, true).delay(3000).fadeTo('slow', 0.2);
    },
    mouseleave: function() {
        items.not(this).fadeTo('slow', 1);
    }
});

フィドル

または単に楽しみのために：

var items = $('.item', '.loop');
items.on('mouseenter mouseleave', function(e) {
    var state = e.originalEvent.type==='mouseout'?false:true;
    items.not(this).stop(true, true).delay(state?3000:0).fadeTo('slow', state?0.2:1);
});

フィドル

Answer 2

これを試して：

var timer = null;
$('.item').hover(function() {
    var $el = $(this).siblings();
    clearTimeout(timer);
    timer = setTimeout(function() {
        $el.stop(true, true).fadeTo('fast', 0.2);
    }, 3000);
}, function() {
    clearTimeout(timer);
    $(".item").stop(true, true).fadeTo('slow', 1);
});

フィドルの例

3秒の待機は奇妙な要件のようです。ほとんどのユーザーは、要素の上にマウスを3秒間置くのを待つことはありません。特に、そうすると何かが起こるという手がかりがないわけではありません。

Answer 3

これを実現する次のコードを使用できます

$('.item').hover(function(){
                $('.item').stop(true,true).not(this).delay(3000).fadeTo('fast',0.5)

         }, function(){ 
                $('.item').stop(true,true).fadeTo('slow', 1);
         });

ワーキングデモ