Question

我想在一个人加载我的页面时运行一个函数。没有互动性。当有人点击时，该功能正在加载。我也想在1分半钟后完成功能循环。我尝试更换＆＃34;点击＆＃34;对于window.onload和body.onload，但你可能已经注意到我现在是一个真正的javascript初学者。请有人帮我一臂之力。现在我只有这个：

＆＃13;

// Animate an element by adding a class to it:
// Paramaters: 
// anim: the class name to add
// time: animation duration (optional, fallsback to the class)
// cb: an optional callback function to happen once the animation ends
$.fn.animatecss = function(anim, time, cb) {

    if (time) this.css('-webkit-transition', time / 1000 + 's');
    this.addClass(anim);

    if ($.isFunction(cb)) {
        setTimeout(function() {
            // Ensure that the element is available inside the callback.
            $(this).each(cb);
        }, (time) ? time : 5000);
    }

    return this;
};

$(document).ready(function() {
    $('.box')click(function() {
        $(this).animatecss('blur-out', 5000, function() {
            console.log('callback');
        });
    });
});

＆＃13;

.blur-out {
    -webkit-filter: blur(8px);
    -webkit-transform: scale(1.4, 1.4);
    -webkit-transition: all 5s ease-out;
    transition: all 5s ease-out;
    visibility: hidden;
}

.box {    
    background:#fff;  
    margin: 80px; 
   padding: 20px;    
    
}

＆＃13;

<div class="box">
    <img src="http://companionplants.com/images/small-plant2.jpg">
</div>

＆＃13;

Answer 1

$(document).ready(function() {
    $('.box').click(function() {
        $(this).animatecss('blur-out', 5000, function() {
            console.log('callback');
        });
    });

    // add this line
    $('.box').trigger('click');
});

参考：http://api.jquery.com/trigger/

Answer 2

如果我理解正确，您希望在加载页面后自动启动动画。

删除事件处理程序以进行单击。保留动画代码如下：

$(document).ready(function() {  
        
  $('.box').animatecss('blur-out', 5000, function() {
    
    console.log('callback');
    
  });

            
});

要自动重复此代码，您需要使用settimeout（）将此代码放在递归函数中。

$(document).ready(function() {
  
  function animate(){
    $('.box').animatecss('blur-out', 5000, function() {
      
      console.log('callback');

    });
            
    setTimeout( animate(), 60000);
  }
  
  animate();
            
});

我希望没有错误，我现在无法检查，但我认为它会对你有帮助

如何让我的功能在页面运行的那一刻运行？

2 个答案: