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 回答