title: How to avoid duplicate each loop in jquery?
body: <p>I had a function that looks like this</p>
  
  <pre><code>function show_services_title(show_services){
      $('.service').fadeOut();
      $.each($('.service'), function(i) {
          $(this).delay(500*i).fadeIn();
      });
  }
  </code></pre>
  
  <p>Now, this functions is invoked when I click on a link, the problem is that when I click the link the function start to show each div with the class 'service', but when I click the link again and the divs haven't finish showing yet then occur a mess in the screen.</p>
  
  <p>Here is an example that simulate the behavior I'm trying to describe and I want to avoid.</p>
  
  <p><a href="http://jsfiddle.net/bw7jn/4/" rel="nofollow">http://jsfiddle.net/bw7jn/4/</a></p>