how to stop a jQuery fadeIn/Out loop, stop() didn't work

Question

I have the following the function for star twinkling effect which is part of an animation sequence.

  function fadeInOut() 
    {
    $('#stars').fadeIn(800, function () {
         $('#stars').fadeOut(800, function () {
                $('#stars').fadeIn(800, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    setTimeout(fadeInOut, 12500);
    }

At the end of animation I have given an option to replay it. For that I wanted to stop this twinkling effect. I tried the following but it didn't work.

  function replayAnim()
    { $('#stars').clearQueue().stop(true); animStart();}

Can someone please point me to the right direction.

Thanks!

Answer 1

You will need to clear the timer too

var timer;
function fadeInOut() {
    $('#stars').fadeIn(800, function () {
        $('#stars').fadeOut(800, function () {
            $('#stars').fadeIn(800, function () {
                timer = setTimeout(fadeInOut, 500);
            });
        });
    });
    timer = setTimeout(fadeInOut, 12500);
}

function replayAnim() {
    clearTimeout(timer)
    $('#stars').clearQueue().stop(true);
    animStart();
}