如何让 jquery 像 CSS 悬停一样悬停？答案

【问题标题】：How to make jquery hover like CSS hover?如何让 jquery 像 CSS 悬停一样悬停？
【发布时间】：2012-08-25 23:07:51
【问题描述】：

我在这里用 jquery 和 css 代码制作了两个悬停效果：

jquery hover 和 css hover 是有区别的。对于jquery悬停，如果您将鼠标移动到框上很短的时间并快速离开框，它将同时运行鼠标进入和鼠标离开动画并完成它们，而鼠标进入后鼠标不在框上-动画结束...

但是对于css悬停，如果您将框悬停，悬停效果将运行mouse-leave-animation，前提是您将鼠标悬停在框上直到鼠标悬停动画结束/完成！！！

如何让 jquery 像 css hover 一样悬停？！当我将鼠标移到盒子上一秒钟时，我不想让整个动画完全运行！

【问题讨论】：

【解决方案1】：

使用.stop() 停止当前正在运行的动画。

在小提琴中，我传入了 'true' 作为参数。这将清除动画队列。请阅读 jQuery 文档；它还向您展示了许多其他很酷的事情，例如传递第二个参数以跳转到动画的末尾。

【讨论】：

谢谢，但是如果我对我的代码进行一些更改怎么办？像这样：jsfiddle.net/UFSvN/9 然后 .stop(true) 不适用于这种情况..
@Pay4m 在这种情况下你希望它做什么......播放整个动画对我来说似乎是最自然的事情。
在 jquery 框上移动鼠标 3 次，然后快速离开。那么动画将连续运行3次..我不希望这种情况发生..所以我认为解决方案是如果只有鼠标仍然在盒子上就允许动画。当它结束时，停止动画序列..
@Pay4m 你的新例子很奇怪。为什么要在同一个元素上同时以两种不同的速度使用 .animate() 方法两次？我只能想象这会产生不可预测的行为。
嗯.. 不.. 同时动画两次与缓动不同。为什么它必须完全 100% 完全相同？无论如何，它在不同的浏览器/机器上的外观/感觉都会略有不同。