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

【问题标题】：Using the jQuery hoverFlow or hoverIntent plugin to animate fadeIn/fadeOut使用 jQuery hoverFlow 或 hoverIntent 插件来动画淡入/淡出
【发布时间】：2011-08-22 21:06:37
【问题描述】：

我尝试了几种不同的方法来解决这个问题，但到目前为止还没有找到一个可以正常工作的解决方案。我想使用以下条件为 .fadeIn 和 .fadeOut 设置动画：

1) 在鼠标悬停时逐渐淡入文本和图像（位于某个范围内）
2) 在进行下一个动画之前完成淡入动画
3) 在 mouseleave 上，逐渐淡出文本和图像
4) 在进行下一个动画之前完成淡出动画
5) 动画应该流畅运行，不应该排队

这是我目前所拥有的：

$(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 插件来帮助淡入和淡出动画正确执行。我会发布我的尝试，但到目前为止还没有成功。这里有没有人熟悉这些插件，你能帮我让他们使用上面的代码吗？

【问题讨论】：

标签： jquery jquery-plugins hover mouseover mouseleave

【解决方案1】：

当你使用fadeIn或fadeOut时，它本质上是在改变显示属性，因此如果它还没有完成一个对另一个并且你执行第二个效果，对象将不再具有jQuery运行效果所需的适当属性，所以，要么减少时间和/或添加 stop() 而不是 dequeue() 如果你喜欢试试这个 http://jsfiddle.net/yAupq/ 我正在使用 fadeTo 即使你的鼠标突然进入和离开也不会中断。对于当前事件，效果将继续，从上一个状态开始，并且不会在鼠标进入或离开对象的所有时间添加到队列中，并且一个接一个地运行这些效果......

【讨论】：

当我尝试第一个图像淡入时发生了什么。当我鼠标离开时图像不会淡出。此外，当我将鼠标悬停在其他链接之一上时，图像会突然切换，而不是第一个图像淡出，第二个图像优雅地淡入。
那么您需要提供更多代码和详细信息，更具体地说是 css，如果可能，请编辑上面的 jsfiddle，保存并在此处发布更新的链接，这样我就可以准确地看到您在说什么。这是图像的更新，jsfiddle.net/yAupq/1 它似乎工作得很好，就像你想要的那样。
这是我正在运行的唯一脚本。我的 css 只定义了位置、字体等。当链接被鼠标悬停时显示的图像和文本可以完美地工作，直到我尝试包含 jQuery 正在做的所有淡入淡出。我想我会使用 hoverFlow 插件，因为更熟悉 jQuery 的人已经为我完成了繁重的工作。在这一点上，我想使用已经存在的东西，而不是重新发明轮子（因为我现在不太擅长造轮子）。你有任何使用 hoverFlow 的经验，你能帮我将它应用到我现有的代码中吗？
不是没有更多的代码，此外，你不必重新发明轮子，更新的小提琴有图像，在进入或离开时，你的效果永远不会太突然，它总是很流畅，再拿一个看这里，jsfiddle.net/yAupq/1 所以如果淡入淡出是你唯一的要求，你不必担心使用比小提琴更复杂的简单 jQuery 的东西，比如小提琴中的jsfiddle.net/yAupq/1
当我看 jfiddle 时，图像不会淡入。它更像是一个弹出窗口。它也不会淡出。它适用于 FF，但不适用于 IE8。