Jquery Slidein滑出懸停效果問題
[英]Jquery Slidein slideout hover effect issue
問題描述
我想下拉菜單有slidein和slideout效果。 並且它有效，但當我徘徊兩次三次然后繼續滑行和外出取決於我懸停的時間。
<div class="tp-menu">
<ul class="menu nav navbar-nav">
<li class="" style=""><a class="dropdown-toggle" href="index1.html">Demo 1 </a>
<ul class="dropdown-menu" style="display: none;">
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
</ul>
</li>
<li class="" style=""><a class="dropdown-toggle" href="index1.html">Demo 2 </a>
<ul class="dropdown-menu" style="display: none;">
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
</ul>
</li>
</ul></div>
和jquery
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
$(this).children("ul.dropdown-menu").slideDown('fast');
//alert(1);
}, function () {
$(this).children("ul.dropdown-menu").slideUp('slow');
});
你可以在這里看到現場演示： http ： //jsfiddle.net/twb4spps/
我需要，如果我快速徘徊兩次，但它顯示子菜單一次。
5 個解決方案
解決方案1
3 2015-12-07 12:32:59
您需要停止動畫並清除動畫隊列。 你可以通過在hoverOut上應用.stop（true）來做到這一點。
.stop() //stops the nimation
.stop(true) //stops the animation and clears the queue
碼：
(function ($) {
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
$(this).children("ul.dropdown-menu").slideDown('fast');
//alert(1);
}, function () {
$(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
});
}(jQuery));
解決方案2
0 2015-12-07 12:35:45
使用filter可以實現此目的。 嘗試像這樣.filter(":not(:animated)") ，這樣它將停止其他不必要的動畫。
(function ($) {
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
$(this).children("ul.dropdown-menu").filter(":not(:animated)").slideDown('fast');
//alert(1);
}, function () {
$(this).children("ul.dropdown-menu").filter(":not(:animated)").slideUp('slow');
});
}(jQuery));
解決方案3
0 已采納 2015-12-07 12:37:32
根據您的喜好，這可能是Slavenko答案的替代方案：
(function ($) {
$("div.tp-menu ul.menu li").hover(function () {
$(this).children("ul.dropdown-menu").filter(':not(:visible)').slideDown('fast');
}, function () {
$(this).children("ul.dropdown-menu").filter(':visible').slideUp('slow');
});
}(jQuery));
這只是使用一些jquery的過濾器和css：not selector來僅將動畫應用於可見的元素。
解決方案4
0 2015-12-07 12:43:50
您的代碼非常好，代碼中沒有問題，請嘗試使用此CSS
ul.menu.nav.navbar-nav {
float: left;
}
並再次檢查，它適用於我，請參閱完整代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
</head>
<body>
<div class="tp-menu">
<ul class="menu nav navbar-nav">
<li class="" style=""><a class="dropdown-toggle" href="index1.html">Demo 1 </a>
<ul class="dropdown-menu" style="display: none;">
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
</ul>
</li>
<li class="" style=""><a class="dropdown-toggle" href="index1.html">Demo 2 </a>
<ul class="dropdown-menu" style="display: none;">
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 1">Sub demo1</a></li>
<li class="submenu-title"></li><li class=""><a class="" href="sub demo 2">Sub demo2</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script>
(function ($) {
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
$(this).children("ul.dropdown-menu").slideDown('fast');
//alert(1);
}, function () {
$(this).children("ul.dropdown-menu").slideUp('slow');
});
}(jQuery));
</script>
</html>
解決方案5
0 2015-12-07 13:01:46
使用Javascript：
(function ($) {
$("div.tp-menu ul.menu li").hover(function () { //When trigger is hovered...
$(this).children("ul.dropdown-menu").slideDown('fast');
//alert(1);
}, function () {
$(this).children("ul.dropdown-menu").stop(true).slideUp('slow');
});
}(jQuery));
CSS：.li_item {display：block; 最大寬度：60像素; }
.li_item>ul {
margin: 0;
padding: 0;
display: block;
width:200px;
}
如何在jquery中克服動畫懸停效果中的這個問題？
[英]How to overcome from this issue in jquery for an animated hover effect?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.