title: fadeOut, fadeIn and stop
body: <p>How do I make my image fade in and stop using the code below? what do I add to it?
  Thanks in advance for any correct answers it is much appreciated! </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="fadeImg" &gt;
      &lt;img src="images/25sprout.jpg"&gt;
      &lt;img style="display:none;" src="images/alex.jpg"&gt;
      &lt;img style="display:none;" src="images/thundersha.jpg"&gt;
      &lt;img style="display:none;" src="images/cathy.jpg"&gt;
      &lt;img style="display:none;" src="images/david.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/package/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $next = 1;          // fixed, please do not modfy;
      $current = 0;       // fixed, please do not modfy;
      $interval = 4000;   // You can set single picture show time;
      $fadeTime = 800;    // You can set fadeing-transition time;
      $imgNum = 5;        // How many pictures do you have
  
      $(document).ready(function(){
          //NOTE : Div Wrapper should with css: relative;
          //NOTE : img should with css: absolute;
          //NOTE : img Width &amp; Height can change by you;
          $('.fadeImg').css('position','relative');
          $('.fadeImg img').css({'position':'absolute','width':'332px','height':'500px'});
  
          nextFadeIn();
      });
  
      function nextFadeIn(){
          //make image fade in and fade out at one time, without splash vsual;
          $('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime)
              .end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn);
  
          // if You have 5 images, then (eq) range is 0~4 
          // so we should reset to 0 when value &gt; 4; 
          if($next &lt; $imgNum-1){ $next++; } else { $next = 0;}
          if($current &lt; $imgNum-1){ $current++; } else { $current =0; }
      };
  &lt;/script&gt;
  </code></pre>