title: jQuery making a loop of functions, each with an animate queue
body: <p>So this is a bit of a head scratcher and I've resorted to asking for help with it. I have created a series of functions with jQuery. Each function contains an animate() queue and ends with a call back that loads the next function, again with it's own animate() queue. Once it reaches the end it calls the first function again and around we go. I have separated the queues into independent functions, because I want to be able to jump to specific points in the loop based on user clicks. So in the code below the loop runs through once, but when it goes back to the beginning the show() and hide() bits don't appear to be doing anything. Any help with this is greatly appreciated!</p>
  
  <pre><code>var firstItem = jQuery('#vehicle-banner-one');
  var firstThumb = jQuery('#thumb-one');
  var secondItem = jQuery('#vehicle-banner-two');
  var secondThumb = jQuery('#thumb-two');
  var thirdItem = jQuery('#vehicle-banner-three');
  var thirdThumb = jQuery('#thumb-three');
  var nextItem = firstItem;
  var nextThumb = firstThumb;
  
  firstItem.hide();
  secondItem.hide();
  thirdItem.hide();
  
  function leadIn(){
      console.log('leadIn');
      thirdItem.css({zIndex:8});
      secondItem.css({zIndex:9});
      firstItem.css({zIndex:10});
  
      firstItem.fadeIn("slow", function(){ holdOne(); });
  }
  
  
  
  function holdOne(){
      console.log('holdOne'); 
      thirdItem.css({zIndex:8}).hide();
      secondItem.css({zIndex:9}).hide();
      firstItem.css({zIndex:10}).show();
  
      firstItem.delay(3000).delay(0, function(){ transTwo(); });
  };
  
  function transTwo(){
      console.log('transTwo'); 
      thirdItem.css({zIndex:8}).hide();
      secondItem.css({zIndex:10}).hide();
      firstItem.css({zIndex:9}).show();
  
      secondItem.fadeIn("slow" , function(){ holdTwo(); });
  };
  
  function holdTwo(){
      console.log('holdTwo'); 
      thirdItem.css({zIndex:8}).hide();
      secondItem.css({zIndex:10}).show();
      firstItem.css({zIndex:9}).hide();
  
      secondItem.delay(3000).delay(0, function(){ transThree(); });
  };
  
  function transThree(){
     console.log('transThree'); 
      thirdItem.css({zIndex:10}).hide();
      secondItem.css({zIndex:9}).show();
      firstItem.css({zIndex:8}).hide();
  
      thirdItem.fadeIn("slow" , function(){ holdThree(); });
  };
  
  function holdThree(){
      console.log('holdThree'); 
      thirdItem.css({zIndex:10}).show();
      secondItem.css({zIndex:9}).hide();
      firstItem.css({zIndex:8}).hide();
  
      thirdItem.delay(3000).delay(0, function(){ transOne(); });
  };
  
  
  function transOne(){
      console.log('transOne'); 
      thirdItem.css({zIndex:9}).show();
      secondItem.css({zIndex:8}).hide();
      firstItem.css({zIndex:10}).hide();
  
      firstItem.fadeIn("slow" , function(){ holdOne(); });
  };
  
  leadIn();
  
  
  
  ///toggle by clicking thumbnails
  
  jQuery('#thumb-one').on('click', function(){console.log('1'); holdOne();});
  jQuery('#thumb-two').on('click', function(){console.log('2'); holdTwo();});
  jQuery('#thumb-three').on('click', function(){console.log('3'); holdThree();});
  
  });
  </code></pre>