having problems with Jquery animation queue/subnavigation/hover

[tokey666]

Ahoy there everybody. I am using a subnav menu script I found. But I modified it just a bit to make the subnav bar animate when a user hovers.

You can see my current work [myrtlebeachsitemasters.com ].

Looks like it works fine, correct? Well, for example, hover over Golf Packages, then Golf Courses, then back, then back again, then faster, faster faster. VERY FAST. Notice what the subnav is doing.... eventually... it quits showing up!

It SEEMS like to me the slideup (or maybe down) animation is not finishing, causing the original reference point to change before it starts the new?

Here is the code for the functions/animation:

 // <![CDATA[
  var timeout  = 1300;
  var closetimer = 0;
  var ddmenuitem = 0;

  function ddmenu_open(){
    ddmenu_canceltimer();
    ddmenu_close();
    ddmenuitem = $(this).find('ul').stop(true,false).slideDown(250);

  }

  function ddmenu_close(){ 
    if(ddmenuitem) ddmenuitem.slideUp(100);
  }

  function ddmenu_timer(){
    closetimer = window.setTimeout(ddmenu_close, timeout);
  }

  function ddmenu_canceltimer(){ 
    if(closetimer){ 
      window.clearTimeout(closetimer);
      closetimer = null;
  }}

  document.onclick = ddmenu_close;
// ]]> 

  $(document).ready(function() {

    $('#ddmenu .mm').bind('mouseover', ddmenu_open)
    $('#ddmenu .mm').bind('mouseout', ddmenu_timer)


  });

I have tried different combinations of stop() and even attempted to learn about queue and dequeue (although I must admit, that is a bit over my head.)

Does anyone have any thoughts?

[Fotiman]

I made just one change and it seems to work correctly for me:

ddmenuitem = $(this).find('ul').stop(true,true).slideDown(250);

:)

[tokey666]

haha, well... yes... that does fix the problem... BUT... now hover over the subnav...

another problem was created. :)

The subnav now flickers while you are hovering over it...

[Fotiman]

Each time you move from one element in the sub menu to another, the mouseover/mouseout events will bubble up and trigger your event handler.

[tokey666]

Yep, exactly. Not only moving, but keeping your mouse still as well triggers it over and over because the menu itself is sliding up and down.

That is why I put the stop in there. The stop makes it so that it does not trigger over and over and over. It triggers once... and STOPS...

the second TRUE in the stop that you had me change, the jumpToEnd, causes this flicker I am talking about, BUT it fixes the problem of the elements coming back in the wrong position. However, setting it to true, creates a worse of two evils because the flicker happens all the time, every time when hovering over the subnav.

I have it set to true now so you can take a look again: [myrtlebeachsitemasters.com...]

I changed the css of the background color so you can see where the menu is stopping.

And for anyone else, here is a quick link to STOP.http://api.jquery.com/stop/

Thanks again. Still looking for some kinda work around. :)