1

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

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

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

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

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

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

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

编辑：

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

4

2 回答 2

1

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

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

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

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

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

于 2011-04-07T21:58:12.750 回答
0

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

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

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

编辑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';
});
于 2011-04-07T19:07:21.837 回答