0

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

1) 在鼠标悬停时逐渐淡入文本和图像（位于跨度内）
2) 在进行下一个动画之前完成淡入动画
3) 在鼠标离开时，逐渐淡出文本和图像
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 插件来帮助淡入和淡出动画正确执行。我会发布我的尝试，但到目前为止还没有成功。这里有没有人熟悉这些插件中的任何一个，你能帮我让他们使用上面的代码吗？

4

1 回答 1

0

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

于 2011-08-22T21:23:30.363 回答