Jquery / CSS menu - Delay toggle until previous toggle is complete

Question

I am building a drop down menu using jQuery and CSS. When you hove a menu item, a list of sub-menu items is revealed below it.

However, because this affects the height of the menu overall (the submenu pushes menu items below it down), it can create an unwanted bouncing effect when trying to navigate.

I'm thinking that I could prevent this by delay the jQuery function that toggles the submenu until the previous toggle has been completed.

Is this possible?

Look at the fiddle below,, here is my current js:

$(document).ready(function () {  // Shows animates submenu transition
    $("ul.available_actions li").hover(function () {
        $("ul.available_actions li ").removeClass("menu_show");
        $(this).delay(30).addClass("menu_show");
        $(".menu_show ul li").toggle(170);
    });
});

Here is a link to a fiddle: http://jsfiddle.net/msEKE/
(Please ignore the submenu items, it's using Asp.Net MVC)

Zword · Accepted Answer · 2014-01-28 15:06:41Z

1

I guess you want something like stop() :

$(".menu_show ul li").stop().toggle(170);

Demo

answered Jan 28, 2014 at 15:06

Zword

6,8013 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery / CSS menu - Delay toggle until previous toggle is complete

1 Answer 1

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related