title: Prevent click event in jQuery triggering multiple times
body: <p>I have created a <a href="http://pmck.net/jq-switcher/" rel="noreferrer">jQuery content switcher</a>. Generally, it works fine, but there is one problem with it. If you click the links on the side multiple times, multiple pieces of content sometimes become visible.</p>
  
  <p>The problem most likely lies somewhere within the click event. Here is the code:</p>
  
  <pre><code>$('#tab-list li a').click(
      function() {
          var targetTab = $(this).attr('href');
          if ($(targetTab).is(':hidden')) {
              $('#tab-list li').removeClass('selected');
              var targetTabLink = $(this).parents('li').eq(0);
              $(targetTabLink).addClass('selected');
              $('.tab:visible').fadeOut('slow',
                  function() {
                      $(targetTab).fadeIn('slow');
                  }
              );
          }
          return false;
      }
  );
  </code></pre>
  
  <p>I have tried adding a lock to the transition so that further clicks are ignored as the transition is happening, but to no avail. I have also tried to prevent the transition from being triggered if something is already animating, using the following:</p>
  
  <pre><code>if ($(':animated')) {
      // Don't do anything
  }
  else {
     // Do transition
  }
  </code></pre>
  
  <p>But it seems to always think things are being animated. Any ideas how I can prevent the animation being triggered multiple times?</p>