Mouseover .animate 先于 .animate 停止

Question

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

1. 向下滑动文档准备好的元素。
2. 为这些相同的元素添加鼠标悬停效果。

这里的问题是，如果您碰巧将鼠标放在文档准备好的元素滑入的区域上，它们将停在鼠标所在的位置。

我们的目标当然是让元素自行滑动而不会受到任何干扰。

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

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

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

编辑：

工作示例感谢@entropo http://jsfiddle.net/PnHpk/7/ 虽然可能会导致图像在一段时间后从那里消失，所以这里的示例使用彩色背景而不是图像http://jsfiddle.net/PnHpk/8/

Answer 1

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

在此处提问时这是一个很好的做法，因为它可以帮助人们通过一个工作示例来回答您。

这是我对其工作的看法： http://jsfiddle.net/entropo/PnHpk/7/

我利用了 jQuery 1.5 的新延迟对象。
见：SO '[jquery] deferred' search

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

Answer 2

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

另外，如果您想等到图像加载完成再播放动画，请使用图像的 .load 事件而不是文档的 .ready 事件

编辑：鼠标悬停后元素略微向上移动，因为它们最初以 10 像素的边距顶部开始，但动画在鼠标移出时将其设置为 0 像素

编辑2：

不要为该图像使用预加载器，而是使用以下内容：

$(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';
});