CODEWITHSUNDEEP
javascriptjquery
Xavier
Xavier

Reputation: 8362

stop a jquery animation loop (function and nested)

How would i stop a jquery animation from loading upon user interaction?

    $('#jqNav li a').click(function(){

    if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });} 
    else if($(this).parent().is(".nav2")) { $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
    else if($(this).parent().is(".nav3")) { $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
    else if($(this).parent().is(".nav4")) { $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};

    $page = $(this).attr('href');
    var $hashTag = $(this).attr('name');
    window.location = "#" + $hashTag;
    loadData();
    return false;
});

this is the user click function;

    function doReplay(){
    $('body')
    .fadeTo(0,1,function(){
        $page = $welcome;
        loadData();

    })
    .delay(1000)
    .fadeTo(0,1,function(){
        $page = $startup;
        loadData();
    })
    .delay(1000)
    .fadeTo(0,1,function(){
        $page = $to2m;
        loadData();
    })
    .delay(1000)
    .fadeTo(0,1, function(){
        $page = $to25m;
        loadData();
        setTimeout(function(){doReplay();},5000);
    });
}

and the above is the animation function

I have tried clearTimeout but it doesn't seem to work.

Upvotes: 0

Views: 1476

Answers (2)

Jivings
Jivings

Reputation: 23250

var stopAnim;
$('#jqNav li a').click(function(){
     ...

     stopAnim = true;
}

function doReplay(){

     if(!stopAnim){
         // do animation
     }
}

Upvotes: 1

Michael Laffargue
Michael Laffargue

Reputation: 10294

You could add a boolean value that you would check in your animation method.

if (!stopAnim) { setTimeout(function(){doReplay();},5000); }

Upvotes: 0

Related Questions