CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joseph
Joseph

Reputation: 314

Delay close toggle in jquery drop down menu

I have a menu that slides out when an li is hovered. The problem is that when i hover the next li, the initial li that is open is still trying to slide up when the new li starts sliding out. There is an overlap. Is there a way to delay the next li sliding out till the previous open li has finished sliding up. cheers

<div class="mainmenu">
    <ul class="dropDownMenu ">
      <li><a href="#">Home</a></li>
      <li><a href="#">Books</a>
        <ul class="sub">
          <div class="boxwrapper">

$(this).find(".mainmenu .sub").hide();
$(".mainmenu ul li").hover(
function() {$(this).find(".sub").slideToggle(1000)})

Upvotes: 1

Views: 596

Answers (1)

StackSlave
StackSlave

Reputation: 10627

Like this:

$('.mainmenu ul li').hover(function(){
  $('.mainmenu ul.sub').slideUp(1000, function(){
    $(this).slideDown(1000);
  });
});

Upvotes: 1

Related Questions