title: stop a jquery animation loop (function and nested)
body: <p>How would i stop a jquery animation from loading upon user interaction?</p>
  
  <pre><code>    $('#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;
  });
  </code></pre>
  
  <p>this is the user click function;</p>
  
  <pre><code>    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);
      });
  }
  </code></pre>
  
  <p>and the above is the animation function</p>
  
  <p>I have tried clearTimeout but it doesn't seem to work.</p>