鼠標懸停.animate停止之前.animate

Question

我有兩個不同的功能.animate ..

1. 滑下上文件準備的元素。
2. 爲這些相同元素添加鼠標懸停效果。這裏

問題是，如果你碰巧有你的鼠標，其中的元素滑動在文件準備方面，他們會在你的鼠標在該位置停止。

課程的目標是讓這些元素自己滑動而不受任何干擾。

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

另一件事..的鼠標離開似乎移動元素略高的位置比它的鼠標懸停之前...

上的圖像加載任何想法？我把代碼放在文檔上加載圖像文件。它儘可能快地加載圖像，但我沒有想到，無論圖像是否加載，元素仍然會滑動..當然，它們在滑動動作之前沒有加載..：/

編輯：

工作例如由於@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動畫已經完成。

另外如果你想等到圖像加載完成播放動畫，然後利用圖像的.load事件，而不是文件。就緒事件

編輯：元素的鼠標懸停因爲後小幅拉昇他們最初開始10px的的上邊距但動畫將其設置爲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'; 
});