我正在开发一个程序,用户将鼠标悬停在图像上并创建该悬停图像的克隆。当用户从悬停的图像中移除光标时,克隆图像淡出并被移除。我在 fadeIn()
和 fadeOut()
之前添加了 stop()
以防止淡入和淡出动画事件堆叠。
问题是,如果鼠标光标多次快速进入和离开图像,则克隆图像的动画淡入淡出仅部分完成或克隆图像根本不淡入淡出。
jsfiddle:
最佳答案
好的,我知道这不是您要求的,但我已经以我认为最有效的方式重写了您的 javascript。
请看这里http://jsfiddle.net/peduarte/L7VLU/1/
我添加了一些注释解释。
我觉得你的版本有点重。创建克隆并在每次鼠标悬停时附加,然后在每次鼠标移出时将其删除。
我这样做是为了在页面加载时克隆图像,并将其隐藏。然后使用 hover()
函数,您可以根据需要淡入淡出。
如果你想保留你的代码,那么你所要做的就是将你当前的停止事件替换为:
stop(true, true)
希望这对您有所帮助。
关于javascript - 如何在图像 fadeIn 和 fadeOut 上使用 stop() 正确防止事件堆叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8354556/