使用jQuery hoverFlow或hoverIntent插件动画淡入/淡出

我试过几种不同的方式解决这个问题，到目前为止还没有发现工作，因为它应该的解决方案。我想动画.fadeIn和.fadeOut具备以下条件：使用jQuery hoverFlow或hoverIntent插件动画淡入/淡出

1）中的文本和图像（位于跨度内）在鼠标悬停进展到下一个动画前
2）完全淡入动画逐渐淡出
3）在鼠标离开，逐渐发展到下一个动画
5）动画应该运行平稳，不应该排队

这里是我迄今为止之前淡出文本和图像
4）完全淡出动画：

$(document).ready(function() { 

$("a").mouseover(function() { 
$("span.imtx").dequeue().fadeIn(3000, "swing", " "); 
}); 

$("a").mouseleave(function() { 
$("span.imtx").fadeOut(3000, "swing", " "); 
}); 
});

到目前为止，上面的代码已经来到最接近我想要的东西，所以我与坚持，如果可能的话，保存任何微小的变化。也就是说，淡入淡出有时会发生，有时不会。它也可以通过无数的鼠标滑鼠和鼠标叶片而感到紧张。我正在使用FF 6.0进行开发，但也需要在所有主流浏览器（FF6，IE8，Google Chrome）上运行。我只用了一个月的jQuery/JavaScript，因此请在回答时考虑这一点。这对我来说并不是一种直观的语言，但我一直在学习。

好吧，现在问题，或者说，请求帮助：我想要合并Ralf Stoltze的hoverFlow插件或Brian Cherne的hoverIntent插件，以帮助淡入淡出和淡出淡出动画正常执行。我会发布我的尝试，但迄今没有任何工作。有人在这里熟悉这些插件，你能帮我让他们使用上面的代码吗？

来源

2011-08-22 Scott

当你使用fadeIn或者fadeOut时，它本质上改变了display属性，因此如果它没有完成一个vs其他的并且你执行了第二个效果，那么object就不再有适当的属性了，因此jQuery需要运行这个效果减少时间和/或增加的stop（）的出队，而不是（），如果你想试试这个http://jsfiddle.net/yAupq/我使用fadeTo如果您的鼠标进入和离开突然，反复开启和关闭，不会收支平衡。影响将继续对当前事件，从去年开始的状态，而不会增加队列中的所有次鼠标进入或离开该对象并运行这些影响一个接一个......

来源

2011-08-22 21:23:30 Tumharyyaaden

这是怎么回事，当我尝试是第一张图像淡入。当鼠标滑过时，图像不会淡出。另外，当我将鼠标悬停在其他链接之一上时，图像会突然切换，而不是第一张图像淡出，第2张图像优雅地衰落。 – Scott

以及您需要提供更多的代码和细节，更具体的CSS如果可能的话，上述编辑的jsfiddle，保存和后期更新的链接在这里，所以我可以看到你所谈论的到底是什么。这里的图像更新，http://jsfiddle.net/yAupq/1/它似乎工作得很好，你想要的方式。 – Tumharyyaaden

这是我正在运行的唯一脚本。我的CSS只是定义了位置，字体等等。当链接被替换时，图像和文本显示完美无瑕，直到我尝试包括jQuery所做的所有淡出。我想我会使用hoverFlow插件作为更熟悉jQuery的方式，已经为我完成了繁重的工作。我想在这一点上喜欢使用已有的东西，而不是重新发明轮子（因为我现在不擅长轮子制造）。你有任何hoverFlow的经验，你能帮我把它应用到我现有的代码吗？ – Scott

使用jQuery hoverFlow或hoverIntent插件动画淡入/淡出

回答

相关问题