title: stop an event once another event is launched
body: <p>I have this jQuery:</p>
  
  <pre><code> $(function() {
          // create the image rotator
          var lightShow = setInterval(rotateImages, 500);
  
  
      function rotateImages() {
  
          var oCurPhoto = $('#photoShow div.current');
          var oNxtPhoto = oCurPhoto.next();
  
          if (oNxtPhoto.length == 0){
  oNxtPhoto = $('#photoShow div:first');
  }
  
  
          oCurPhoto.removeClass('current').addClass('previous');
  
  oNxtPhoto.hide().addClass('current').fadeIn(2000, function() {
  
  oCurPhoto.removeClass('previous');
   });
  
  
      }
      });
  </code></pre>
  
  <p>it is included in a loop , so this line will be executed 5 consecutive times<br>
  But what i want to do is to stop the effect of a <code>fadeIn</code> once another <code>fadeIn</code> is launched with the loop.</p>