0

我偶然发现了这个 jQuery 片段：

 $(".faded").each(function(i) {
   $(this).delay(i * 400).fadeIn();
 });​

在行动中看到它：http: //jsfiddle.net/RExZs/

无论如何，我正在尝试将其变成悬停功能，因此当您将鼠标悬停在导航菜单按钮上时，div 会以这种很酷的延迟效果淡入。然后当鼠标离开时，div应该消失。这是一个“STORE”按钮（锚），所以当他们悬停它时，这将用于显示产品列表。

到目前为止，我想出的是：

  $(".products").hover(function(){   // I added THIS line
   $(".products-list").hide().each(function(i) { 
   $(this).delay(i * 400).fadeIn();  
    }); 
 });   // and of course, THIS line

问题是它在页面加载后立即开始显示 div，哈哈。

现在，当我悬停“STORE”按钮时，效果是完美的，但是当鼠标离开时，它会重新开始，重新加载那些 div。

要么帮助我，要么告诉我可以去哪里摆脱我该死的 jQuery 成瘾。:)

谢谢！

4

2 回答 2

0

您需要单独的鼠标移入和鼠标移出行为。

您还需要在切换时停止任何现有动画，并使用额外true参数告诉它清空动画队列并跳转到当前动画的末尾。

$(".products").hover(function() {
   $(".products-list").stop(true).each(function(i) { 
       $(this).delay(i * 200).fadeIn();  
   }); 
}, function() {
    $(".products-list").stop(true, true).fadeOut();
});

有关演示，请参见http://jsfiddle.net/alnitak/tvCBq/

于 2012-06-02T15:28:27.373 回答
0

这取决于你想要你的“mouseout”效果是什么。jsFiddle

$(".products").hover(
function(){
   $(".products-list").each(function(i) { 
       $(this).delay(i * 400).fadeIn();  
   }); 
},
function(){
    $(".products-list").stop(true).show().hide();
});​

PS：您应该始终尝试使用最新版本的 jQuery。您会看到，通过.products快速进出鼠标，您可以更改项目淡入的顺序。但是，如果您使用 jquery 1.7 而不是 1.4，它们将始终以正确的顺序淡出。看起来 jQuery 已经改变了动画在过渡期间的排队方式。 jQuery 1.7.2 小提琴

于 2012-06-02T15:32:38.927 回答