Question

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

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

查看实际操作：http://jsfiddle.net/RExZs/

无论如何，我试图将其转换为悬停功能，因此当您将鼠标悬停在导航菜单按钮上时，div会以这种很酷的延迟效果淡入。然后当鼠标离开时，div会消失。这是一个＆＃34; STORE＆＃34;按钮（锚点），因此这将用于在悬停它时显示产品列表。

到目前为止，我所提出的是：

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

问题是，一旦页面加载，它就会开始显示div。

现在，当我徘徊在＆＃34; STORE＆＃34;按钮，效果是完美，但是当鼠标离开时它重新开始，重新加载这些div。

要么帮助我，要么告诉我在哪里可以克服我该死的jQuery成瘾。：）

谢谢！

Answer 1

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

您还需要在切换时停止任何现有动画，并使用额外的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/了解演示

Answer 2

这取决于你想要的“鼠标”效果。 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 fiddle

jQuery hover / delay / fadeIn div

2 个答案: