Question

What I am trying to do is to animate an image across the page, continuously, while being draggable at the same time. Currently, it moves across, is draggable, and goes back to the initial position after the initial animation is done.

However, I don’t know how to get it to run again so that it’s a continuous loop of animation. I was thinking to put the function animateCloud() inside animateCloud() but not sure where to attach it. Below is the jsFiddle demo:

http://jsfiddle.net/iamacatperson/SfFgt/2/

I would also appreciate if there’s a better method of doing this. I am just starting to learn jQuery and I only know a couple of syntax.

Answer 1

I don’t know why are you using .stop() but I guess this should work-

function animateCloud() {
    $(cloud).animate({
        left: '300px'
    }, 25000, function() {
        $(this).css({ left: '0' });
         animateCloud();
    });

}

I hope this is what you want.