[Solved] stop/start animation loop on click? jquery

I am making a slideshow that continuously loops through 5 images etc. I have it looping fine but the loop won’t start and stop. I was using a pause = true/false variable and adding if statements throughout the code – not very good looking or efficient (took it out of an example). It would spoil the animations and images would go missing if the loop paused after the statements etc.

Are there any standard methods for controlling loops like this?

function setupSlideShow(){
    // Setup SlideShow stuff here then start the loop
    slideBoxTransition()
}

var page = 1;
function slideBoxTransition(){
    switch (settings['transition']['effect']){
        case "slide" :
            next.css({left:settings['width']+"px",top:0,display:"block"});
            current.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false});
            next.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false, complete : function(){
                current.css("display","none")
                slideBoxGetImage();
            }});
            break;
    }
}

function slideBoxGetImage(){
    current = $self.eq($self.index(next))
    page += 1;
    if(page < $self.length){
        next = $self.eq( $self.index(current) + 1 );
    }else{
        page = 0;
        next = $self.first();
    }
    slideBoxTimeout();
}

function slideBoxTimeout(){
    setTimeout(function(){
        slideBoxTransition();
    }, delay);
}

Anything would be much appreciated!

Thanks.

Enquirer: str11

||

Solution #1:

var interval;
function slideBoxTimeout(){
    var interval = setInterval(function(){
        slideBoxTransition();
    }, delay);
}

$(".play").click(function() {
    slideBoxTimeout();
});
$(".pause").click(function() {
    clearInterval(interval);
});

taken from : jQuery play/pause jQuery function

Respondent: Yusaf Khaliq

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.