How to stop jQuery delay timer based animation?

Question

So I'm building this modal / timed animation with slide navigation from scratch.

I have a function for the buttons that navigate the slides, and also a function to animate the frames every 5 secs. My problem is I'm not sure how to "break" the delay function if the user decides to take over by clicking the navigation buttons. As soon as the user clicks any of those buttons the delay based animation function needs to stop working.

    // Timer for Animating Frames
    // Need a kill timer function
    var animateFramesTimer = function(){

        $('#tour_1')
            .delay(5000).fadeOut('fast', function() {

        $('#tour_2')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {

        $('#tour_3')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {

        $('#tour_4')
            .fadeIn('fade').delay(5000).fadeOut('fast', function() {
                        $('#tour_modal').fadeOut('fast');
                        // END
                    });
                });
            });
        });

    }

    animateFramesTimer();

So I run animateFramesTimer and if a certain button is clicked I need the function to stop working, I tried a while loop which seemed like the correct path to go, but it kept breaking in the browser :(

var autoAnimate = true;

while(autoAnimate){
    // delay animation
}

Do you know of a better way to accomplish this?

Answer 1

$('[id^="tour_"]').stop(true, true); // kills current animations
animateFramesTimer = function() {};  // removes function