jQuery Forum

Hi,

I'm having an issue with using fadeIn on some simple tab jQuery I've written.

I have a list of tabs which, when clicked, I want to fadeIn a div.

This works fine with a show / hide and for the most part with fadeIn. However, if I click on the tabs quickly in a row, it sporadically shows multiple divs. I presume that this is because the previous fadeIn has not completed before the next click occurs.

1.         //When page loads...
2.         $(".info").hide(); //Hide all content
3.         $("ul.tabs li:first a").addClass("active").show(); //Activate first tab
4.         $(".info:first").show(); //Show first tab content
5.         //On Click Event
6.         $("ul.tabs li a").click(function() {
7.             $("ul.tabs li a").removeClass("active"); //Remove any "active" class
8.             $(this).addClass("active"); //Add "active" class to selected tab
9.             var activeTab = $(this).attr("href"); //Find the href attribute value to identify the active tab + content
10.             $(".info").hide(); //Hide all tab content
11.             $(activeTab).fadeIn(5000); //Fade in the active ID content
12.             return false;
13.         });

Help!

Thanks,

Nick