title: Simple cycled slideshow with next/prev link
body: <p>I am more or less a beginner to Jquery and to start with it
  I tried to make a clickable, cycled slideshow, based on <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow" rel="nofollow">this</a> one.
  So far so good. The code works (see below).
  My questions:</p>
  
  <ol>
  <li><p>Isn't there an easier way to write the code. I am kind of repeating the same code for prev and next.</p></li>
  <li><p>When I click on the next/prev links and the animation starts — and during the animation I click again, then sometimes the image is flickering or there is an error.
  Is there a way to force the animation to finish, before it reacts on my click.</p></li>
  </ol>
  
  <p>Javascript:</p>
  
  <pre><code>    $(function() {
  
      $('#prev').click(function() {
          var $active = $('#slideshow IMG.active');
          var $prev = $active.prev();
          $active.addClass('last-active');
  
      if($active.is(":first-child")){$prev = $("IMG:last-child");}
          $prev.css({opacity: 0.0})
              .addClass('active')
              .animate({opacity: 1.0}, 1000, function() {
                  $active.removeClass('active last-active');
              }); 
  
      }); 
  
  
      $('#next').click(function() {
          var $active = $('#slideshow IMG.active');
          var $next = $active.next();
          $active.addClass('last-active');
  
      if($active.is(":last-child")){$next = $("IMG:first-child");}
          $next.css({opacity: 0.0})
              .addClass('active')
              .animate({opacity: 1.0}, 1000, function() {
                  $active.removeClass('active last-active');
              }); 
  
      }); 
  
      });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    #slideshow {position:relative; height:350px; opacity:1.0;}
      #slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
      #slideshow IMG.active {z-index:10; opacity:1.0;}
      #slideshow IMG.last-active {z-index:9;}
      #next {color:#0000ff; cursor:pointer;}
      #prev {color:#0000ff; cursor:pointer;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="slideshow"&gt;
          &lt;img src="image1.jpg" class="active" /&gt;
          &lt;img src="image2.jpg" /&gt;
          &lt;img src="image3.jpg" /&gt;
          &lt;img src="image4.jpg" /&gt;
      &lt;/div&gt;
      &lt;div id="next"&gt;NEXT&lt;/div&gt;
      &lt;div id="prev"&gt;PREV&lt;/div&gt;
  </code></pre>