1

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

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

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

4

3 に答える 3

3 
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);
});

フィドル

于 2012-05-21T19:24:20.980 に答える
1

これを試して：

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秒間置くのを待つことはありません。特に、そうすると何かが起こるという手がかりがないわけではありません。

于 2012-05-21T19:23:32.650 に答える
1

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

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

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

ワーキングデモ

于 2012-05-21T19:27:59.967 に答える