My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I've attempted to replace "click" with window.onload and body.onload, but being new to JavaScript, I'm struggling to achieve this. Any assistance would be greatly appreciated. Currently, all I have is the following code snippet:
// Animate an element by adding a class to it:
// Parameters:
// anim: the class name to add
// time: animation duration (optional, falls back to the class)
// cb: an optional callback function to run 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');
});
});
});.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;
}
<div class="box">
<img src="http://companionplants.com/images/small-plant2.jpg">
</div>