悬停时的下拉延迟超时jquery

时间：2014-05-22 16:17:22

标签： jquery hover timeout delay

http://jsfiddle.net/natvk/

我已经构建了这个下拉菜单，将鼠标悬停在第三个框上并等待下拉列表显示然后悬停在汽车上并等待第二个下拉列表显示。现在问题是，如果我徘徊了它虽然有延迟，我有时间回到菜单上，它仍然会再次调用切换。菜单不会保持打开状态。如果用户在菜单上再次徘徊并再次返回，我该如何保持打开状态？

除了js fiddle上的代码之外，这里的用户建议使用此代码，但是使用它时，菜单首先没有调用，所以没有看到任何内容，建议的代码在这里：

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)
});

感谢，

伊恩

2 个答案:

答案 0 :(得分：2)

您需要使用stop(true)立即将动画移动到停止时的最后一帧。试试这个：

$(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

答案 1 :(得分：1)

在这里：一个简单的绝对可靠的脚本

HTML只是为了展示一个例子。要点是添加JavaScript（+ jQuery）并在CSS中添加每个li.hover属性#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>
Iif

相关问题
最新问题