Jquery - Toggle, Show - need to wait before next effect

Question

Hello!

I use 4 link (submenu button) on my site. Every link open a DIV tag.

This DIV tags default stat is hide. (with jquery)

 $('div[class*="my_"]').hide();

After i click a submenu then i show() the div tag i need:

$('a#submenu_1').click( function() {

     $('div[class*="my_"]').hide(); // hide all DIV if some of them opened before
     $('div.my_submenu_1').toggle('slow'); 
  });

This is work well, till i patient to wait to hide if other DIV is opened before. But if im a click too fast between sub-menus then sometimes jquery can't HIDE the div tag before SHOWn the new.

My i use some dealy .. wait?

Could you suggest me something?!

Answer 1

I agree with @Ghommey, but you may also want to do the show as part of the callback to hide() so that you know that all of the others are hidden first.

 $('div[class^="my_"]').stop().hide(0,function() {
      $('div.my_submenu_1').show('slow');
 });

Note, that you could probably rewrite this a little more generically.

 $('a.menu').click( function() {
      var menuID = $(this).attr('href');
      $('div.menu').stop().hide(0,function() {
          $(menuID).show('slow');
      });
      return false;
 });

where your HTML looks like:

 <a href="#my_menu_1" class="menu">Menu 1</a>
 <a href="#my_menu_2" class="menu">Menu 2</a>
 ...

 <div id="my_menu_1" class="menu">...</div>
 <div id="my_menu_2" class="menu">...</div>

This would have the advantage of having the link actually work if javascript were turned off.