Mouseover .animate在之前停止.animate
我有两个不同的.animate函数..
- 向下滑动文档准备好的元素。
- 将鼠标hover效果添加到这些相同的元素。
问题在于，如果您碰巧将鼠标放在元素在文档准备就绪时滑入的区域，它们将停在鼠标所在的位置。
当然，目标是让元素自行滑动而不会中断。
http://photoshopmesta.net/sic/theTest/slide.html
另一件事……鼠标移动似乎将元素移动到略高于鼠标hover之前的位置……
关于图像加载的任何想法？ 我把代码加载到文件准备好的文件中。 它尽可能快地加载图像，但我没想到无论图像是否加载，元素仍然会滑动…当然它们在滑动动作之前没有加载..：/
编辑：
工作示例感谢@entropo http://jsfiddle.net/PnHpk/7/虽然可能是因为图像在一段时间后从那里消失所以inheritance人的例子有彩色背景而不是图像http://jsfiddle.net/PnHpk / 8 /
我把你的例子放在jsfiddle： http ： //jsfiddle.net/entropo/PnHpk/
在这里提问时这是一个很好的做法，因为它可以帮助人们用一个有效的例子来回答你。
以下是我开始工作的看法： http ： //jsfiddle.net/entropo/PnHpk/7/
我利用了jQuery 1.5的新Deferred对象。
请参阅： SO’ [jquery] deferred
此外，这不完全是我所做的（我更喜欢使用push来创建一个Promise堆栈），但这很有用： 延迟的promise和同步jquery.animate（）
这样做的原因是因为你在mouseover和mouseout中有一个.stop。 显然将它们放在那里是有意义的，所以你应该做的是在onload动画完成后设置mouseover和mouseout事件。
此外，如果您想等到图像完成加载以播放动画，则使用图像的.load事件而不是文档.ready事件
编辑：鼠标hover后元素略微向上移动，因为它们最初以10px的边距开始但动画在mouseout上将其设置为0px
EDIT2：
而不是使用该图像的预加载器，使用这样的东西：
$(document).ready(function() { var img = document.createElement('img'); img.onload = function() { console.log("%o finished loading", this); //Set mouseover/mouseout event here }; img.src = 'linkit.png'; });