jQuery悬停/延迟/延迟

Question

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

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

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

无论如何，我试图把它变成一个悬停功能，所以当你在导航菜单按钮上悬停时，div就会淡入到这个凉爽的延迟效果中。然后当老鼠离开的时候，div的应该会消失。这是一个“商店”按钮(锚)，所以这将用于显示产品列表时，他们悬停它。

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

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

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

现在，当我悬停“商店”按钮时，效果是完美的，但是当鼠标离开时，它又重新开始，重新加载那些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，您可以更改条目fadeIn的顺序。但是，如果使用jQuery1.7而不是1.4，它们总是会以正确的顺序淡出。在过渡期间，jQuery似乎已经改变了动画的排队方式。jQuery 1.7.2小提琴