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

无论哪种方式，您都希望将$(".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.
});

通过绕过点击事件加载功能

1 个答案: