jQuery的悬停/延迟/淡入div的

我偶然发现了这个jQuery的片段：jQuery的悬停/延迟/淡入div的

$(".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的，只要在页面加载，LOL。

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

要么帮助我，要么告诉我在哪里我可以去克服我该死的jQuery瘾。 :)

谢谢！

来源

2012-06-02 Stephen

你的非工作代码的小提琴怎么样？ – Alnitak

对于鼠标输入和鼠标输出，您需要单独的行为。

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

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

用于演示

来源

2012-06-02 15:28:27 Alnitak

不幸的是'.fadeIn（）'会“记住”转换中捕捉到的任何div的部分不透明度。随着多个徘徊，你最终会失去他们。另外第二个参数是缓动或回调，为什么发送它'真'？ – Sinetheta

@Sinetheta我没有看到我的小提琴，也许是因为第二个'true'参数。 – Alnitak

在动画完成之前，鼠标进出'.products'。 – Sinetheta

见http://jsfiddle.net/alnitak/tvCBq/这取决于你希望你的“鼠标移开”的效果是什么。 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

来源

2012-06-02 15:32:38 Sinetheta

是的，我刚刚注意到了一些东西。与这些问题是当你去点击其中一个div，他们淡出。 – Stephen

当然，那是因为我正在回答你问的问题。通过制作'.products'的'.product-list'项子项来稍微改变标记，并且你自己有一个导航菜单。我已经编辑了相应的小提琴。 – Sinetheta

jQuery的悬停/延迟/淡入div的

回答

相关问题