2016-11-24 58 views
0

我正在設計一個着陸頁,其中圖片形成一個網格。點擊一個按鈕後,圖片會逐漸消失並逐一返回,形成另一個矩形網格,以獲得有趣的效果。我怎樣才能讓它自動繞過點擊功能並自動加載圖片。換句話說,網格形成了MINUS用戶的輸入。 (沒有點擊我將刪除的按鈕)通過繞過點擊事件加載函數

 $(".animate").on("click", function(){ 
    //fading out the thumbnails with style 
    $("img").each(function(){ 
    d = Math.random()*1000; //1ms to 1000ms delay 
    $(this).delay(d).animate({opacity: 0}, { 
    //while the thumbnails are fading out, we will use the step function to apply some transforms. variable n will give the current opacity in the animation. 
     step: function(n){ 
     s = 1-n; //scale - will animate from 0 to 1 
     $(this).css("transform", "scale("+s+")"); 
     }, 
     duration: 1000, 
     }) 
     }).promise().done(function(){ 
     //after *promising* and *doing* the fadeout animation we will bring the images back 
    storm(); 

回答

1

您希望在文檔加載完成後使其運行。如果您在頁面加載後仍然希望延遲,則可以使用setTimeout(),以便在X秒後運行。

的document.ready:https://learn.jquery.com/using-jquery-core/document-ready/

的setTimeout:https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

你想改變 $(".animate").on("click", function(){$(document).ready(function(){

無論哪種方式,所以它看起來像

$(document).ready(function(){ 
    //Current code here 
}); 

$(document).ready(function(){ 
    setTimeout(function(){ 
    //Current code here 
    },2000); // 2000 is 2 seconds. 
});