Jquery 如何使此菜单将其效果延迟一秒钟？
我正试图使这个侧菜单更方便用户。如果从下往上悬停，则在其中导航没有问题，但是如果从上往下悬停，当您尝试将鼠标悬停在另一个父级上时，用户很难切换到另一个父级。我认为最好是延迟效果，这样用户就有时间从一个家长切换到另一个家长Jquery 如何使此菜单将其效果延迟一秒钟？,jquery,html,css,css-animations,Jquery,Html,Css,Css Animations,我正试图使这个侧菜单更方便用户。如果从下往上悬停，则在其中导航没有问题，但是如果从上往下悬停，当您尝试将鼠标悬停在另一个父级上时，用户很难切换到另一个父级。我认为最好是延迟效果，这样用户就有时间从一个家长切换到另一个家长 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <b
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<style>
#nav
{
margin:0;
padding:0;
float:left;
background:white;
}
#nav li
{
list-style:none;
background:#f8f8f8; width:209px;
border-bottom: 1px solid #666;
}
#nav li a
{
display:block;
padding:8px;
border-left:4px solid #a89172;
text-decoration:none; color:#4b4b4b;
text-transform: uppercase;
font-family:serif;
font-size: 15px;
-webkit-transition:background 0.2s, color 0.2s;
-moz-transition:background 0.2s, color 0.2s;
-ms-transition:background 0.2s, color 0.2s;
-o-transition:background 0.2s, color 0.2s;
transition:background 0.2s, color 0.2s;
}
#nav li a:hover
{
border-left: 4px solid #d5bb8d;
background: #f8f8f8;
text-transform: uppercase;
font-family:serif;
font-size: 15px;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-ms-transition-delay:0.1s;
-o-transition-delay:0.1s;
transition-delay:0.1s
}
#nav li ul
{
visibility: hidden;
display:none;
opacity:0;
transition:opacity 0.5s linear;
}
#nav li:hover ul
{
margin-left:-2pc;
visibility: visible;
display:block;
opacity:1;
}
#nav li:hover ul li
{
background:#a89172;
margin-left: 5px;
border-left: 4px solid #d5bb8d;
}
#nav li:hover ul li a
{
color:#ffffff;
text-transform: uppercase;
font-family:serif;
font-size: 13px;
}
#nav li:hover ul li a:hover
{
background:#d5bb8d;
border-left: 4px solid #d5bb8d;
color:ffffff;
text-transform: uppercase;
font-family:serif; font-size: 13px;
}
}
/*box-shadow: 2px 2p*/
</style>
<ul id="nav">
<li><a href="http://store.premierequestrian.com/Dressage_c_6.html">Dressage </a>
<ul>
<li><a href="http://store.premierequestrian.com/Dressage-Arenas_c_171.html">Dressage Arenas</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Arena-Packages_c_172.html">Dressage Arena Packages</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Flower-Boxes_c_14.html">Dressage Flower Boxes</a></li>
<li><a href="http://store.premierequestrian.com/Dressage-Accessories_c_13.html">Dressage Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Silk-Flowers_c_15.html">Silk Flowers</a></li>
<li><a href="http://store.premierequestrian.com/Cavaletti_c_9.html">Cavaletti</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_173.html">Training Obstacles</a></li>
<li><a href="http://premierequestrian.com/category/Arenas/underConstruction.html" target="_blank">Western Dressage</a></li>
<li><a href="http://premierequestrian.com/category/Arenas/dressageArenaLayouts.html" target="_blank">Dressage Assembly Instructions</a></li>
</ul>
</li>
<li><a href="http://premierequestrian.com/category/Horse-Arena-Footing.html" target="_blank">Horse Arena Footing</a>
<ul>
<li><a href="http://premierequestrian.com/category/footing-products/PremierHT-Footing.html" target="_blank">Premier HT</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/master-blend.html" target="_blank">Master Blend Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/ggtfooting.html" target="_blank">GGT Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/ProTex.html">ProTex Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/athletex.html" target="_blank">Athletex Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/prostride.html" target="_blank">ProStride Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/hydrokeep.html" target="_blank">Hydro-keep Arena Footing</a></li>
<li><a href="http://premierequestrian.com/category/Horse-Arena-Footing.html">Arena Maintenance Equipment</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/newConstruction.html" target="_blank">Horse Arena Construction</a></li>
<li><a href="http://premierequestrian.com/category/otto-products/otto-perforated.html" target="_blank">Otto Sport</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Horse-Jumps_c_170.html" target="_blank">Horse Jumps</a>
<ul>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Standards_c_7.html">Horse Jumps Standards</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Fills_c_11.html">Horse Jumps Jump Fills</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Gates_c_8.html">Horse Jumps Gates</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Poles_c_21.html">Horse Jumps Poles</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Flower-Boxes_c_176.html">Horse Jumps Flower Boxes</a></li>
<li><a href="http://store.premierequestrian.com/Jump-Cups_c_62.html">Jumps Cups</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Accessories_c_18.html">Horse Jump Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Sponsor-Theme-Jumps_c_87.html">Sponsor / Theme Jumps</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Courses_c_17.html">Horse Jumps Courses</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Jump-Assemblies_c_19.html">Horse Jumps Assemblies</a></li>
<li><a href="http://store.premierequestrian.com/Cavaletti_c_177.html">Cavaletti</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_178.html">Training Obstacles</a></li>
<li><a href="http://store.premierequestrian.com/Mini-Pony-Kids-Jumps_c_131.html">Kids Jumps</a></li>
<li><a href="http://horsejumps.net/Category/Standards/Jump-Assembly-Instructions.html" target="_blank">Jump Assembly Instructios</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Barn-Stable_c_10.html">Barn & Stable</a>
<ul>
<li><a href="http://store.premierequestrian.com/TrunksStorage_c_74.html">Trunks/Storage</a></li>
<li><a href="http://store.premierequestrian.com/Carts_c_72.html">Carts</a></li>
<li><a href="http://store.premierequestrian.com/Mounting-Blocks_c_73.html">Mounting Blocks</a></li>
<li><a href="http://store.premierequestrian.com/Racks-Hardware_c_75.html">Racks & Hardware</a></li>
<li><a href="http://store.premierequestrian.com/Feeders-Waterers_c_150.html">Feeders & Waterers</a></li>
<li><a href="http://store.premierequestrian.com/EZ-Grip-Mat-Mover_c_162.html">Ez-Grip Mat Mover</a></li>
<li><a href="http://www.dressagearena.net/pages/stallmats.html" target="_blank">Ruber Stall Mats</a></li>
<li><a href="http://www.dressagearena.net/pages/hoofgrid.html" target="_blank">Hoof Grid</a></li>
<li><a href="http://www.dressagearena.net/pages/barnaccessoriestrailer.html" target="_blank">Barn & Trailer Accessories</a></li>
<li><a href="http://dressagearena.net/pages/barn-and-stables.html">Barn & Stable Packages</a></li>
<li><a href="http://www.dressagearena.net/pages/fencing.html" target="_blank">Vinyl Fencing</a></li>
<li><a href="http://store.premierequestrian.com/Yard-Decor_c_155.html">Yard Decor</a></li>
<li><a href="http://premierequestrian.com/category/footing-products/PremierGroomer.html" target="_blank">Arena Maintenance Equipment</a></li>
<li><a href="http://www.dressagearena.net/pages/fly_control.html" target="_blank"> Fly Control</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Horse-Rider_c_152.html">Horse & Rider</a>
<ul>
<li><a href="http://store.premierequestrian.com/Wireless-Audio-Systems_c_98.html">ComTek Wireless System</a></li>
<li><a href="http://store.premierequestrian.com/Riding-Apparel_c_161.html">Riding Apparel</a></li>
<li><a href="http://store.premierequestrian.com/Training-Obstacles_c_185.html">Training Obstacles</a></li>
<li><a href="http://store.premierequestrian.com/Training-Accessories_c_186.html">Training Accessories</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Toys_c_187.html">Horse Toys</a></li>
<li><a href="http://store.premierequestrian.com/Horse-Tack_c_188.html">Horse Tack</a></li>
<li><a href="http://www.dressagearena.net/pages/horse_care_nutrition.html" target="_blank">Care & Nutrition</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLxtS4Ltt9gzaNqvUFitFaBK22GmcvPMFT" target="_blank">ProTips Video Clips</a></li>
</ul>
</li>
<li><a href="http://store.premierequestrian.com/Books-DVDs-Gifts_c_16.html">
Books/DVD's/Gifts</a>
<ul>
<li><a href="http://store.premierequestrian.com/Books_c_70.html">Books</a></li>
<li><a href="http://store.premierequestrian.com/DVDs_c_140.html">DVD's</a></li>
<li><a href="http://store.premierequestrian.com/Gifts_c_154.html">Gifts</a></li>
<li><a href="http://www.kidjumps.net/" target="_blank">Kid Jumps</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$('.nav ul li').hover(function(){
$(this).children('ul').stop(true,false,true).slideToggle(400);
});
</script>
#导航
{
保证金：0；
填充：0；
浮动：左；
背景：白色；
}
#李海军
{
列表样式：无；
背景：#F8；宽度：209px；
边框底部：1px实心#666；
}
#李娜
{
显示：块；
填充：8px；
左边框：4px实心#a89172；
文字装饰：无；颜色：#4b4b；
文本转换：大写；
字体系列：衬线；
字体大小：15px；
-webkit过渡：背景0.2s，颜色0.2s；
-moz过渡：背景0.2s，颜色0.2s；
-ms转换：背景0.2s，颜色0.2s；
-o过渡：背景0.2s，颜色0.2s；
过渡：背景0.2s，颜色0.2s；
}
#导航李a：悬停
{
左边框：4px实心#d5bb8d；
背景：#f8f8；
文本转换：大写；
字体系列：衬线；
字体大小：15px；
-webkit转换延迟：0.1s；
-moz转换延迟：0.1s；
-ms转换延迟：0.1s；
-o-转换延迟：0.1s；
转换延迟：0.1s
}
#纳夫利乌尔
{
可见性：隐藏；
显示：无；
不透明度：0；
过渡：不透明度0.5s线性；
}
#李海军：悬停
{
左边距：-2厘米；
能见度：可见；
显示：块；
不透明度：1；
}
#导航李：悬停ul李
{
背景：#a89172；
左边距：5px；
左边框：4px实心#d5bb8d；
}
#导航李：悬停ul李a
{
颜色：#ffffff；
文本转换：大写；
字体系列：衬线；
字体大小：13px；
}
#导航李：悬停ul李a：悬停
{
背景#d5bb8d；
左边框：4px实心#d5bb8d；
颜色：ffffff；
文本转换：大写；
字体系列：衬线；字体大小：13px；
}
}
/*盒影：2px2p*/
$（'.nav ul li'）。悬停（函数（）{
$（this）.children（'ul'）.stop（真、假、真）.slideToggle（400）；
});
delay（）$（'.nav ul li'）$（'#nav ul li'）