javascript - 如何在图像 fadeIn 和 fadeOut 上使用 stop() 正确防止事件堆叠？

Question

我正在开发一个程序，用户将鼠标悬停在图像上并创建该悬停图像的克隆。当用户从悬停的图像中移除光标时，克隆图像淡出并被移除。我在 fadeIn() 和 fadeOut() 之前添加了 stop() 以防止淡入和淡出动画事件堆叠。

问题是，如果鼠标光标多次快速进入和离开图像，则克隆图像的动画淡入淡出仅部分完成或克隆图像根本不淡入淡出。

jsfiddle:

jsfiddle

Answer 1

好的，我知道这不是您要求的，但我已经以我认为最有效的方式重写了您的 javascript。

请看这里http://jsfiddle.net/peduarte/L7VLU/1/

我添加了一些注释解释。

我觉得你的版本有点重。创建克隆并在每次鼠标悬停时附加，然后在每次鼠标移出时将其删除。

我这样做是为了在页面加载时克隆图像，并将其隐藏。然后使用 hover() 函数，您可以根据需要淡入淡出。

如果你想保留你的代码，那么你所要做的就是将你当前的停止事件替换为:

stop(true, true)

希望这对您有所帮助。