dropdown delay timeout jquery on hover

Question

I've built this dropdown menu, hover on the third box and wait for dropdown to show up then hover on cars and wait for second dropdown to show up. Now prob is if I hover out of it although there's delay and i have time to go back on menu, it still goes through with invoking toggle again. the menu doesnt remain open. how can I keep it open in case user hovers out and back in again on the menu?

Apart from the code on js fiddle, a user on here suggested this code, but with it the menu isn't invoking in the first place so nothing is seen, the suggested code is here:

var menu_animation_timeout = null;

$('.ddown').hover(function(){
    clearTimeout(menu_animation_timeout);
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 500) 

    }, function() {
    clearTimeout(menu_animation_timeout);   
    menu_animation_timeout = setTimeout(function(){
    $( this ).children('ul').stop().slideToggle(500,'easeOutBounce');
    }, 1000)
});

thanks,

Ian

It should be noted that your #thirdlevel is 1 pixel off and causing the menu close toggle when traversing from the 2nd to 3rd level. Change to left: 198px; — aowie1
– aowie1, Commented May 22, 2014 at 16:23
thanks for the pointers, was aware of that, but it had to be that way since it follows the proposed design. Thanks anyways! — hihaho67
– hihaho67, Commented May 22, 2014 at 20:17

Rory McCrossan · Accepted Answer · 2014-05-22 16:20:56Z

2

You need to use stop(true) to immediately move the animation to the last frame when it stops. Try this:

$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.ddown').hover(function () {
        $(this).children('ul').stop(true).delay(500).slideDown(500);
    }, function () {
        $(this).children('ul').stop(true).delay(1000).slideUp(500);
    });
});

Updated fiddle

answered May 22, 2014 at 16:20

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

Comments

Aart den Braber · Accepted Answer · 2015-04-28 13:45:16Z

Here you go: a simple infallible script

The HTML is just to show an example. The gist is to add the JavaScript (+jQuery) and in your CSS, add to each li:hover a property li.hover like this:

#nav li:hover, #nav li.hover {
    /* your css */
}

/* timeout on hover: big menu */
var hoverTimeout; //declare timeout
$('#nav li').hover(function() { //mouse enter

  clearTimeout(hoverTimeout); //remove timeout, we're taking over control
  $('#nav li').removeClass('hover'); //clear all that are hovered
  $(this).parents('li').addClass('hover'); //add class to all our parents

},function() { //mouse leave

  var $this=$(this); //create local copy
  hoverTimeout = setTimeout(function() {
    $this.parents('li').removeClass('hover'); //un-hover all parents
  },1000); //1 second after we remove our mouse

});

@charset "UTF-8";

body {
  background: #aaa;  
}
nav {
  display: table-row;
    padding: 0;
    margin: 0;
    border: 0;
}
    nav a {
        display: block;
        line-height: 1em;
        text-decoration: none;
    }
    #nav, nav li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
#nav {
    position: relative;
    z-index: 597;
    *display: inline-block;
    padding-left: .75rem;
    display: table-cell;
  width: 99%;
}
    #nav li {
        float: left;
        min-height: 1px;
        vertical-align: middle;
    }
    #nav li.hover, #nav li:hover {
        position: relative;
        z-index: 599;
        cursor: default;
    }
    #nav ul {
        visibility: hidden;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 598;
        width: 100%;
        bottom: 0;
        left: 0;
        margin-top: 0;
        text-transform: none;
        min-width: 210px;
    }

    #nav ul .hassubmenu>a:after {
        content: "+";
        float: right;
        width: 10px;
        text-align: center;
    }
    #nav ul .hassubmenu:hover>a:after, #nav ul .hassubmenu.hover>a:after { content: "-" }
        #nav ul ul {
            top: 0;
            left: auto;
            right: -99.5%;
        }
    #nav li.hover>ul, #nav li:hover>ul { visibility: visible }
    #nav ul, #nav {
        list-style-type: none;
        padding-left: 0;
    }
#nav>li {
    padding: .5rem;
    background: #ddd;
    border: #56a0d3 solid 2px;
    border-top: none;
    border-bottom: none;
}
  #nav>li+li { border-left: none }
  #nav>li a {
      color: #000;
      font-weight: 700;
      text-decoration: none;
  }
  #nav>li:hover>a, #nav>li.hover>a { opacity: 1 }
#nav ul li {
    position: relative;
    float: none;
    font-weight: 400;
    background: #fff;
    background: transparent\9;
    background: hsla(0,0,100%,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
    zoom: 1;
    padding: 5px 10px;
}
  #nav ul li:nth-child(n) { filter: none }
  #nav ul li:hover, #nav ul li.hover { background: #fff }
    #nav ul li a { line-height: 1.2rem }
    #nav ul li:last-child>a { border-radius: 0 0 3px 3px }
#nav ul li ul li ul li li {
    background: #000;
    background: transparent\9;
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
    zoom: 1;
    border: 10px solid transparent;
    border-top: 1px solid #ddd;
    border-bottom: none;
}
#nav ul li ul li ul li li:nth-child(n) { filter: none }
#nav ul li ul li ul li li:first-child { border-top: none }
#nav ul li ul li ul li li:last-child { border-bottom: none }
#nav ul li ul li ul li li:hover, #nav ul li ul li ul li li.hover { background: #000 }
#nav ul li ul li ul li li a { color: #62a2d6 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<ul id="nav">

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>

		<li class="hassubmenu">
			<a href="link">Menu-item</a>

			<ul>
				<li class="hassubmenu">
					<a href="link">Sub-menu-item</a>

					<ul>
						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>

						<li>
							<a href="link">Sub-sub-menu-item</a>
						</li>
					</ul>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>

				<li>
					<a href="link">Sub-menu-item</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>

Collectives™ on Stack Overflow

dropdown delay timeout jquery on hover

2 Answers 2

Comments

Here you go: a simple infallible script

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Here you go: a simple infallible script

Comments

Your Answer

Sign up or log in

Post as a guest

Related