FadeIn and some simple tabs

FadeIn and some simple tabs

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