[jQuery] Stopping Multiple Clicks Triggering Animation
Hi all,
I have built the following switcher using jQuery:
http://pmck.net/jq-switcher/
It all works fine except for one small problem. If you click quickly
on a few tabs, sometimes more than one of the tabs will show. The code
for handling the click event is as follows:
$('#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() {
// Transition to new tab
$(targetTab).fadeIn('slow');
}
);
}
return false;
}
);
I think that's all pretty straight forward. I've tried adding a lock
while a transition is happening and also adding something like:
if ($(':animated')) {
// Don't do anything
}
else {
// Do transition
}
But it seems to always think things are being animated. Any idea how I
can stop the breakage? Any help at all would be much appreciated.