Question

I have a slideUp menu, which is acting erratically in that sometimes if I flick too quickly across it, it slides up and down maybe 4 or 5 times. At other times, if I hover over it before it’s finished loading properly, the menu will slideUp and that becomes its “normal” state so that if I hover over it, it slides down before I have a chance to click any menu items.

Here is the code:

$(document).ready(function(){
 var opened = false;
 $("#menu_box").hover(function(){

  if(opened){
   $("#menu_box").animate({"top": "+=97px"}, "200");
  }

  else{
   $("#menu_box").animate({"top": "-=97px"}, "200");
  }


  $("#menu_content").slideToggle("200");
  $("#menu_tab .close").toggle();
  opened = !opened;


 });
})

The code was originally a click function, rather than hover, so I tried amending it to the following:

$(document).ready(function(){
 $("#menu_box").hover(function(){

  $("#menu_box").toggle(function(){

   $("menu_box").animate({"top": "-=97px"}, "200");
   $("#menu_content").slide("200");

            });
 });
});

But that just made the menu fade from right to left – not sliding at all.

Where am I going wrong? TIA!

Answer 1

Fixed it with bind mousenter/mouseleave instead of hover!