Question

I have this jQuery:

 $(function() {
        // create the image rotator
        var lightShow = setInterval(rotateImages, 500);


    function rotateImages() {

        var oCurPhoto = $('#photoShow div.current');
        var oNxtPhoto = oCurPhoto.next();

        if (oNxtPhoto.length == 0){
oNxtPhoto = $('#photoShow div:first');
}


        oCurPhoto.removeClass('current').addClass('previous');

oNxtPhoto.hide().addClass('current').fadeIn(2000, function() {

oCurPhoto.removeClass('previous');
 });


    }
    });

it is included in a loop , so this line will be executed 5 consecutive times
But what i want to do is to stop the effect of a fadeIn once another fadeIn is launched with the loop.

Answer 1

You should use .stop() before the fade on the element that you want to stop fading.

It will clear the queue for any animations. Bear in mind it will also stop the fade getting to its callback function.

Find out more here: .stop() – jQuery API