jQueryhover卡住了

当我将鼠标hover在一个img上，它会消失到另一个img并且过快地退出时，fadeOut会卡住并且淡入淡出。 我已经尝试过.stop（），正如我在其他回复中看到的那样，但仍然无法正常工作。 我还能用其他东西代替.stop（）吗？

   
  $("#image1").mouseenter(function () { $(this).stop(true, true).fadeOut(1000); }); $("#image2").mouseleave(function () { $("#image1").stop(true, true).fadeIn(500); });  

Answer 1

我似乎记得在创建这个网站时遇到类似的问题。

解决方案是使用.hover()和.stop()来确保一次只运行一个动画，我认为你有。 还要确保鼠标hover图像位于另一个图像的顶部，然后将其淡入淡出。 淡出的图像会“卡住”，因为在某些不透明度下， .mouseleave()停止触发，而.mouseenter()在另一个图像上开始触发。

就像是：

 $$ = $("#image1"); $$.hover(function () { $$.stop().animate({ opacity: 0 }, 1000); }, function () { $$.stop().animate({ opacity: 1 }, 1000); }); 

#image1必须在#image2上方才能工作， #image1淡出为’揭示’ #image2 。 代码使用.animate()而不是.fadeIn()和.fadeOut()但效果是相同的。

编辑 –在淡出动画结束后淡入另一个div使用动画function的完整回调。

就像是：

 $$ = $("#image1"); $$.hover(function () { $$.stop().animate({ opacity: 0 }, 1000); }, function () { $$.stop().animate({ opacity: 1 }, 1000, function() { $("#finalDiv").animate({ opacity: 1, 500 }); }); }); 

#finalDiv需要在你的html中的2 s之后出现在它们之上。

Answer 2

我不确定你是如何努力实现这一目标的，但我知道应该怎么做。 试试这个http://jsfiddle.net/xy5dj/

确保在同一元素上监听两个事件（最好是包装元素）。 请注意，fadeOut实际上从呈现的内容中删除了元素（display：none），确保鼠标事件不会在该元素上触发。

旁注：我曾经使用过的一个肮脏的技巧（如果你必须这样做，那么你做错了）是使用animate函数的回调能力在动画后清除元素的样式，即

 $('el').animate({opacity:0}, 500, function(){$(this).attr('style', '')}); 

Answer 3

小提琴

您应该在表单中使用动画/过渡：

 .fadeTo( duration, opacity, complete ) 

complete是回调函数。