Question

I got this jquery code. And this is some kind of slideshow with fading effect. So it loops… this is the first code

$(document).ready(function(){
    function looptour(){
        $("#health").hide();
        $("#billing").hide();
        $("#pension").delay(6000).fadeOut(2000);
        $("#health").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#billing").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#pension").delay(14000).fadeIn(2000,looptour);
    }
    looptour();
});

My problem is to how to stop the loop that you saw on the first code onclick event? Then after clicking that event a new loop will proceed and so on…

Here’s the new code,

$("#tournums").click(function(){
    function billingloop(){
        $("#health").hide();
        $("#pension").hide();
        $("#billing").delay(6000).fadeOut(2000);
        $("#pension").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#health").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#billing").delay(14000).fadeIn(2000,looptour);
    }
    billingloop();
});

Thank you so much jquery masters for helping me out with this problem of mine.

Answer 1

My best guess is to use .clearQueue() for this:

function stopLoop() {
    $("#pension").clearQueue();
    $("#health").clearQueue();
    $("#billing").clearQueue();
}

// snip //

$("#tournums").click(function(){
    stopLoop();

    function billingloop(){
        $("#health").hide();
        $("#pension").hide();
        $("#billing").delay(6000).fadeOut(2000);
        $("#pension").delay(6000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#health").delay(14000).fadeIn(2000).delay(6000).fadeOut(2000);
        $("#billing").delay(14000).fadeIn(2000,looptour);
    }
    billingloop();
});