Question

What I wanna achieve is animate a div up and down until next click when it should stop and wait for another click to start animating again.

http://jsfiddle.net/WwJRD/

this is the function animating my div:

function upAndDown(element,x) {

    $(element).animate({'top':'+='+x+'px'}, 'slow')
    .animate({'top':'-='+x+'px'}, 'slow',function(){upAndDown(element,x)});
};

$('.clickThis').click(function(){
    upAndDown('.moveThis',50);
});

I really dont know how to get what I want!

Thanks

Answer 1

This is actually a little tricky, because you have multiple queued animations and a callback.

The problem is if you just stop, and then call upAndDown later, you will start animating from the current position, meaning you might move around the page sporadically. You can’t jumpToEnd in the stop() call either, because you will still call the callback.

I fixed this by adding a class moving when (appropriately) the object is moving. This is used in the callback to decide whether to keep animating.

You end up with this:

http://jsfiddle.net/EkpNK/

Now, this keeps animating until it finishes a cycle. If you want to have it stop immediately, you can call .stop(false, true) twice to stop both animations and return to the original spot:

http://jsfiddle.net/EkpNK/1/

If you want to stop in place and continue from where you left off, it will take some extra code.