Mouseover .animate在之前停止.animate

Question

我有两个不同的.animate函数..

1. 放下文档就绪的元素。
2. 将鼠标悬停效果添加到这些相同的元素。

问题在于，如果您碰巧将鼠标放在元素在文档准备就绪时滑入的区域，它们将停在鼠标所在的位置。

当然，目标是让元素自行滑动而不会中断。

http://photoshopmesta.net/sic/theTest/slide.html

另一件事......鼠标移动似乎将元素移动到比鼠标悬停之前略高的位置......

关于图像加载的任何想法？我把代码加载到文件准备好的文件中。它尽可能快地加载图像，但我没想到无论图像是否加载，元素仍然会滑动...当然它们在滑动动作之前没有加载..：/ < / p>

编辑：

工作示例感谢@entropo http://jsfiddle.net/PnHpk/7/ 虽然可能会让图片在一段时间后从那里消失，所以继续使用彩色背景代替图片http://jsfiddle.net/PnHpk/8/ < / p>

Answer 1

我把你的例子放在jsfiddle：http://jsfiddle.net/entropo/PnHpk/

在这里提问时，这是一个很好的做法，因为它可以帮助人们用一个有效的例子来回答你。

以下是我开始工作的看法： http://jsfiddle.net/entropo/PnHpk/7/

我利用了jQuery 1.5的新Deferred对象 请参阅：SO '[jquery] deferred' search

此外，这不完全是我所做的（我更喜欢使用push制作Promise堆叠），但这很有帮助：Deferred promises and synchronizing jquery.animate()

Answer 2

这样做的原因是因为你在mouseover和mouseout中有.stop。显然将它们放在那里是有意义的，所以你应该做的是在 onload动画完成后设置mouseover和mouseout事件。

此外，如果您想等到图像完成加载以播放动画，那么使用图像的.load事件而不是文档.ready event

编辑：鼠标悬停后元素略微向上移动，因为它们最初以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';
});