鼠标控制.animate停止先前的.animate

Question

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

1. 滑下文档上的元素。
2. 向这些相同的元素添加鼠标切换效果。

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

当然，我们的目标是让元素在不受任何干扰的情况下自行滑动。

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

另一件事..。鼠标似乎移动元素的位置比鼠标上方略高.

对图像负载有什么想法吗？我将代码放入其中，将图像文件加载到文档中。它以尽可能快的速度加载图像，但我没有想到，不管图像加载与否，元素仍然会滑动。当然，它们在滑行之前没有加载..:/

编辑：

工作示例感谢@熵 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的新延迟对象。

请参阅：‘搜索’

而且，这并不完全是我所做的(我更喜欢使用push来创建一个Promise堆栈)，但这是有帮助的：延迟承诺和同步jquery.animate()

Answer 2

之所以这样做，是因为您的鼠标覆盖和鼠标输出中有一个.stop。显然，让它们出现是有意义的，所以您应该做的是在onload动画完成后设置mouseover和mouseout事件。

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

编辑:元素在鼠标结束后稍微向上移动，因为它们最初以10 0px的页边距开始，但动画在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';
});