Animating with jQuery, smoother animation without pause

Question

I have three DIVS, #clouds-1 , #clouds-2 , #clouds-3 , where each of them have background of different clouds. I'm animating them up and to the right, but cannot get the effect I want. The problem is that when going to next function the animation stops for like 1-2s which I do not want, and I want the mto move slowly but smooth.

This is the code I've got so far:

// Clouds - 1
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-1").animate({
           top:'-=24px',
           right: '+=50px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-1").animate({
            top:'+=24px',
            right: '-=50px'
        }, 8000, moveRight);
    }

    moveRight();
});

// Clouds - 2
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-2").animate({
           top:'-=24px',
           right:'-=80px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-2").animate({
            top:'+=24px',
            right:'+=80px'
        }, 8000, moveRight);
    }

    moveRight();
});

// Clouds - 3
$(document).ready(function() {
    function moveRight() {
        $("div#clouds-3").animate({
           top:'+=24px',
           right:'+=100px'
        }, 8000, moveLeft);
    }

    function moveLeft() {
        $("div#clouds-3").animate({
            top:'-=24px',
            right:'-=100px'
        }, 8000, moveRight);
    }

    moveRight();
});

Answer 1

Try this one:

Download the js from http://www.spritely.net/

HTML:

<head>
    <script type="text/javascript" src="js/jquery.spritely.js"></script>
</head>
    <div id="wrapper">
        <div id="cloud-01"></div>
        <div id="cloud-02"></div>
    </div>

Javascript:

$(document).ready(function(){   
        $('#ground').pan({fps: 30, speed: 3, dir: 'right'});
        $('#cloud-01').pan({fps: 30, speed: 3, dir: 'right'});

});

Hope this will help you.

Animating with jQuery, smoother animation without pause

Question

1 answers

solution1
0 2013-07-12 12:57:46

Animating with jQuery, smoother animation without pause

Question

1 answers

solution1 0 2013-07-12 12:57:46

solution1
0 2013-07-12 12:57:46