Jquery悬停和动画

时间:2012-06-17 14:06:28

标签: jquery css performance css3 jquery-animate

My Code

我有一个div,当你将鼠标悬停在它上面时显示不同的浏览器,如果它们受支持,则在css中完成。但是,我也希望让他们使用jquery进行动画制作,我已经开始工作了。

但是,如果您将鼠标快速移动到悬停区域上方然后将鼠标悬停在其上,则该动画将不会重新触发。你必须将鼠标移动很远,然后将鼠标悬停在它上面。我发现重现这个问题的最佳方法是将鼠标放在它上面并快速将鼠标悬停在它上面几次。

我怀疑原因是jquery仍然认为鼠标已经结束,即使css隐藏它并说它不是。我也认为必须将鼠标移到远处是时间相关而不是距离,但同样不确定。我也试过.mouseover(),. hover()和.mouseenter(),.mouseenter()看起来表现得最好。

这是怀疑的行为吗?它并不完全“打破”,但我希望这种效果能起作用。如果这是预期的行为,css3动画可能会复制我想要的效果吗?

另外作为旁注,如果你看过小提琴,我应该考虑添加其他任何浏览器吗? (个人观点还可以,但更多的是,如果有任何浏览器偷偷摸摸地变得更受欢迎)

2 个答案:

答案 0 :(得分:2)

您可以通过添加stop()

来解决此问题
$(this).stop().animate({'width':'25px'},500);

此处有更多信息:http://api.jquery.com/stop/

答案 1 :(得分:0)

我认为如果你没有停止上一个动画,那么这种情况经常发生,我认为你可以像这样解决这个问题。

 $(this).stop().animate( /*your animation*/ );

有时你应该检查所有元素而不仅仅是关于动画的东西,因为我记得有些用户停止了javascript验证只是点击输入(就在我使用VTiger的时候)。

此链接包含有关它的一些信息http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

总结我认为有一些未知的浏览器,如midori,maxthon,以及其他一些在linux中使用的浏览器,如konqueror和其他一些。