Question

(coffee break)

THE ANIMATION IN QUESTION

Having this:

$('.cloud').each(function(){
    var cloud = $(this);

    function move(){
        mL = Math.round(Math.random()*60);
        mT = Math.round(Math.random()*60);
        cloud.animate({left: mL, top: mT },2000);  
    }           
    move();

    setInterval(function() {
        move();
    }, 2000);

});

As you can see in the demo the squares pause any movement after 2 seconds. And than they continue with the loop. What’s the way to just make them roll around without the pause/restart feel? Thank you very many 🙂

Answer 1

$('.cloud').each(function(){
    var cloud = $(this);

    function move(){
        mL = Math.round(Math.random()*60);
        mT = Math.round(Math.random()*60);
        // set callback upon complete animation
        // set easing to linear to prevent acceleration and deceleration of animation
        cloud.animate({left: mL, top: mT },2000,'linear',move);  
    }           
    move();

   // get rid of timer

});