jQuery Dropdown queue buildup

Question

I have created a drop down with jQuery that can be seen here by clicking the Preview button on top:

var open_submenu = null;

$(function(){
  $('.dropdown').hover(function(){

    // hide all previous submenus and fix queue buildup problem
    $('.sublinks').stop(false, true).hide();

    // get corresponding submenus
    var submenu = $(this).parent().next();

    $(this).parent().nextAll().stop();

    $(submenu).css({
      top: $(this).offset().top + $(this).height() + 4 + 'px',
      left: $(this).offset().left + 'px',
      zIndex:10000
    });

    // show the submenu
    $(submenu).stop().slideDown(300);

    open_submenu = submenu;

    submenu.hover(function(){}, function(){
      $(this).slideUp(300);
    });
  }, function(){});
});

http://jsbin.com/ubire3/edit

It works fine except for one problem. When I hover over the main hover links (blue ones) quickly eg. going horizontally quickly hovering each top menu, the some submenus don't close. How do I make it so that even if I hover fast over them all other submenus are closed?

Edit

I saw this useful link using some ways to avoid this, but having bit of problems, how to apply that in my case.

What are queues in jQuery?

score 2 · Accepted Answer · edited May 07 '18 at 17:48

2

Great, finally I solved the problem myself:

All I did was to modify the line:

$('.sublinks').hide();

to

$('.sublinks').stop(false, true).hide();

The stop stopped animations for previous sub-menus. You can see the documentation of it on the jQuery site.

See fixed version here:

http://jsbin.com/ubire3/5/edit

edited May 07 '18 at 17:48

halfer

19,824
17
99
186

answered Mar 15 '10 at 08:35

Sarfraz

377,238
77
533
578

Rakesh Juyal · Answer 2 · 2010-03-15T12:13:18.243

0

Fixed it here: http://jsbin.com/ubire3/3

I don't know why my changes were not reflected @ above link

See it here

i am not using stop method

edited Mar 15 '10 at 12:13

answered Mar 15 '10 at 07:38

Rakesh Juyal

35,919
68
173
214

@Rakesh: Thanks but the problem is still there, just try hovering from Menu One to Menu Five **quickly**, the submenues of previous heading do not close. Also i don't see any change in the code, wonder what you changed there? – Sarfraz Mar 15 '10 at 07:47

jQuery Dropdown queue buildup

Edit

2 Answers2