クリックイベントを迂回して機能をロードする

Question

写真がグリッドを形成するランディングページを設計しています。ボタンをクリックすると、絵が消えて一枚ずつ戻って、別の長方形のグリッドが形成され、興味深い効果が得られます。どうすれば自動的にクリック機能をバイパスして画像を自動的に読み込むことができますか？換言すれば、グリッドはユーザの入力がない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(); 

Answer 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

あなたは$(document).ready(function(){に$(".animate").on("click", function(){を変更したいと思ういずれかの方法では、それが

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

または

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

ようになります