title: stop/start animation loop on click? jquery
body: <p>I am making a slideshow that continuously loops through 5 images etc. I have it looping fine but the loop won't start and stop.  I was using a pause = true/false variable and adding if statements throughout the code - not very good looking or efficient (took it out of an example).  It would spoil the animations and images would go missing if the loop paused after the statements etc.</p>
  
  <p>Are there any standard methods for controlling loops like this?</p>
  
  <pre><code>function setupSlideShow(){
      // Setup SlideShow stuff here then start the loop
      slideBoxTransition()
  }
  
  var page = 1;
  function slideBoxTransition(){
      switch (settings['transition']['effect']){
          case "slide" :
              next.css({left:settings['width']+"px",top:0,display:"block"});
              current.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false});
              next.animate({left: "-="+width+"px"}, {duration : speed, easing : easing, queue : false, complete : function(){
                  current.css("display","none")
                  slideBoxGetImage();
              }});
              break;
      }
  }
  
  function slideBoxGetImage(){
      current = $self.eq($self.index(next))
      page += 1;
      if(page &lt; $self.length){
          next = $self.eq( $self.index(current) + 1 );
      }else{
          page = 0;
          next = $self.first();
      }
      slideBoxTimeout();
  }
  
  function slideBoxTimeout(){
      setTimeout(function(){
          slideBoxTransition();
      }, delay);
  }
  </code></pre>
  
  <p>Anything would be much appreciated!</p>
  
  <p>Thanks.</p>