JQuery - how do I exit user defined function?

Question

I have a function that runs on document load:

    function animateText() {
        $('.block')
        .css("background-image", "url(images/text-4-line-1.png)")
        .animate({left: "526"}, 1, "linear" ) .delay(2200).fadeIn(1000)
        .delay( 3000)
        .fadeOut(1000)
        $('.block2')
        .css("background-image", "url(images/text-4-line-2.png)")   
            .animate({left: "484"}, 1).delay(3200).fadeIn(1000)
         .delay( 2500)
          //etc...
    }

I want to have a button that will stop this function from running and return all elements to original positions. I also want to have another button that will replay the animation function.

I can't get this to work.

Any help would be great!!

Thanks!

Answer 1

.stop(true, true)

will stop the animations and clear the jQuery fx queue.

To "replay" your animaten, it should be just fine to call your animateText() function again.

$('#yourbutton').click(animateText);

Reference: .stop()

Answer 2

.stop will be helpful in your case.

Answer 3

if your styling your dom elements not inline (e.g. style="color: red;"), this might do it...

$('#stop').click(function(){
   $('.block,.block2').stop().removeAttr('style');
});
$('#play').click(function(){
   $('.block,.block2').stop(true,true).removeAttr('style');
   animateText();
});

note: don't do inline styling...

I made this fun demo