title: How to add a fade effect when changing img
body: <p>I am going through an array of images on click and need two things:</p>
  
  <p>1) The current image fade out and the new image fades in (see demo, click forward)</p>
  
  <p>2) Prevent the clicks from incrementing if the button is clicked more than once .. i think I need to use .stop() for this i just don't know how.</p>
  
  <p>here's a jsfiddle: <a href="http://jsfiddle.net/8Y6dq/2/" rel="nofollow">http://jsfiddle.net/8Y6dq/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;figure&gt;
      &lt;img src="coast.png" /&gt;
      &lt;figcaption&gt;Photography&lt;/figcaption&gt;
      &lt;nav&gt;
          &lt;a href="#"&gt;Back&lt;/a&gt;
          &lt;a href="#"&gt;Forward&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(function(){
      var images = [
          "water.png",
          "view.png",
          "sunset.png",
          "coastal.png"
      ],
          $img = $("figure img"),
          $i = 0,
          $j = images.length,
          $back = $("nav a").first(),
          $forward = $("nav a + a");
  
  
      $forward.click(function(){
          $i = ($i + 1) % images.length;
          $img.fadeOut().prop("src", images[$i]).fadeIn();
      });
  
      $back.click(function(){
          $j -= 1;
          if($j &gt;= 0) {
              $img.prop("src", images[$j]);
          } else {
              $j += $j + 1;
          }
      });    
  
  });
  </code></pre>