jquery向下滑動頁面加載圖像

Question

我沒有經驗jquery（或真的Java腳本），但試圖使圖像（img id=mike ...）在頁面加載時滑入。

翻翻jQuery的文檔，並試圖谷歌查詢後，我至今想出這個

$(document).ready(function() { 

$("#mike").load(function() { 
     $(this).show("slide", { direction: "up" }, 2000); 

}); 

    }); 

並應用了CSS display:hidden，直到我希望它滑入在頁面加載它仍然隱藏。

這似乎不工作，除非我重新加載頁面。

希望有人可以幫助我這個請:)

Answer 1

​​如果圖像是不會被觸發從緩存中檢索，根據不同的瀏覽器，所以你需要如果圖像是complete手動觸發事件，像這樣：

$(function() { 
    $("#mike").one('load', function() { 
    $(this).show("slide", { direction: "up" }, 2000); 
    }).each(function() { 
    if(this.complete) $(this).load(); 
    }); 
}); 

.one()確保事件只觸發一次。 .each()通過循環遍歷每個元素，在這種情況下只有一個元素，如果它已經是complete（如果從緩存中取回，它將觸發事件以確保它熄滅）（如果它已經被觸發，則.one()不處理它）滑入兩次）。

Answer 2

@Dean，您可能最好使用CSS和jQuery的組合來完成這項工作 - 這是爲了解決圖像緩存問題（請參閱Nick對解釋的迴應）。這裏有一個粗略的例子：

CSS：

#mike { 
    display: block; 
    margin: 0; padding: 0; /* Ignore this if you're using a reset.css */ 

    position: absolute; /* Change this to relative based on the containing elements */ 
    top: 2000px;   /* Assumes you have an image that's 100px tall as an example */ 
} 

的jQuery：

jQuery(function(){ 
    $('#mike').animate({'top':'0'},255,'linear', function(){ 
     console.log('Done Animation); 
    }); 
}); 

您也可以延遲動畫幾秒（或毫秒）頁面加載後：

jQuery(function(){ 
    // Delay the animation by 1 second after page load before animating. 
    $('#mike').delay(1000).animate({'top':'0'},255,'linear', function(){ 
     console.log('Done Animation); 
    }); 
});