Call a JS function automatically after some time (say 100 ms)

Question

I don't want the div to animate on mouse events mouseOver() or mouseOut(). I want that the div automatically animate itself (continuously)...

Here is the JFiddle of my code... http://jsfiddle.net/UxtJV/610/

HTML

<div class=circle1></div>

CSS

.circle1 {
position:absolute; top:50px; left:50px;
width: 0px; height: 0px;
border:1px solid red;
padding:20px;
border-radius:50%;
}

JS

$(".circle1").mouseover(function() {
  $(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);
});
$(".circle1").mouseout(function() {
  $(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
});

possible duplicate http://stackoverflow.com/q/11901074/612920 — Mansuro, Jul 09 '14 at 07:23
@Mansuro, NOT duplicate... I dont know how to do it in this case... Because im very new at JS... — user46329, Jul 09 '14 at 07:26
Check the answer to that question, you can use the function setInterval which will allow you to call a function continuously at an interval you pass as parameter — Mansuro, Jul 09 '14 at 07:28
@Mansuro, I've tried several times... can you solve my problem? — user46329, Jul 09 '14 at 07:40

score 1 · Accepted Answer · answered Jul 09 '14 at 07:49

You will need to adjust the timings youself. The interval's timing cannot be shorter than the timeout's timing or the whole thing will go haywire.

$(document).ready(function(){
    setInterval(function(){
        $(".circle1").animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);
        setTimeout(function(){
          $(".circle1").animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
        },250);
    },500);
});

BTW, this is your fiddle http://jsfiddle.net/UxtJV/615/

All the best

Call a JS function automatically after some time (say 100 ms)

1 Answers1