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 秒钟——尤其是在没有任何线索的情况下，如果他们这样做会发生一些事情。

于 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 回答