Prevent click event in jQuery triggering multiple times
<p>I have created a <a href="http://pmck.net/jq-switcher/">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>
