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

Posted 2023-03-06

【中文标题】如何让 jquery 像 CSS 悬停一样悬停？

【英文标题】：How to make jquery hover like CSS hover?

【发布时间】：2012-08-25 23:07:51

【问题描述】：

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

http://jsfiddle.net/UFSvN/3/

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

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

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

【参考方案1】：

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

示例：http://jsfiddle.net/UFSvN/4/

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

【讨论】：

谢谢，但是如果我对我的代码进行一些更改怎么办？像这样：jsfiddle.net/UFSvN/9 然后 .stop(true) 不适用于这种情况..

@Pay4m 在这种情况下你希望它做什么......播放整个动画对我来说似乎是最自然的事情。

在 jquery 框上移动鼠标 3 次，然后快速离开。那么动画将连续运行3次..我不希望这种情况发生..所以我认为解决方案是如果只有鼠标仍然在盒子上就允许动画。当它结束时，停止动画序列..

@Pay4m 你的新例子很奇怪。为什么要在同一个元素上同时以两种不同的速度使用 .animate() 方法两次？我只能想象这会产生不可预测的行为。

嗯.. 不.. 同时动画两次与缓动不同。为什么它必须完全 100% 完全相同？无论如何，它在不同的浏览器/机器上的外观/感觉都会略有不同。