Question

I have a simple cloud image that I wish to go from the left to right side of the browser, where it should disappear outside the right side of the screen while fading out, and then fade back in and start the animation all over again, from the left. Here is the code I have so far:

var animate = function(targetElement, speed){

    $('#cloudsAnimated').css({left:'-200px'});
    $('#cloudsAnimated').animate(
        {
        'left': "100%",
        opacity:0
        },
        {
        duration: speed,
        easing:"linear",
        complete: function(){
            animate(this, speed);
            }
        }
    );

};
animate($('#cloudsAnimated'), 5000);

This function fades out the image as it gets to the right side of the screen, but it completely disappears and doesn’t appear again (I’ve set the ‘complete’ key of the function to restart again). If I keep the opacity unchanged then it does start again, so it has something to do with the opacity. Again, I’d like the image to fade back in and start moving from left to right all over again.

Please let me know if you know a solution! Thanks.

Answer 1

$("#cloudsAnimated").css({left: '-200px').fadeIn();

You may also want to use the width of #cloudsAnimated instead of hard coding -200

You could also use .animate again so that it fades in on the same queue:

$("#cloudsAnimated").css({left: '-200px');
$("#cloudsAnimated").animate({'left': 0, 'opacity': 1}, 500);

The 500 is just a guess .. if you want the real animation time it would probably be speed divided by the ratio of 200 to the window width.