jQuery下拉菜单悬停向下滑动/向上

Question

我有一个下拉菜单，我试图在菜单项悬停时进行动画处理。

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

jsfiddle link

Answer 1

在这里，你去了一个解决方案https://jsfiddle.net/8sukcnqe/6/

$(document).ready(function() { 
 
    //Show then hide ddown menu on hover 
 
    $('.menuitem').hover(function() { 
 
     $(this).children('.navmain').slideDown(500); 
 
    }, function() { 
 
     $(this).children('.navmain').slideUp(500); 
 
    }); 
 
});

* { 
 
    /* Used so padding and margins fit in elements defined size */ 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 0; margin: 0; 
 
} 
 
.wrapper { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #010101; 
 
} 
 

 
/* Navigation Bar Styling */ 
 

 
.top { 
 
    background-color: #010101; 
 
    width: 100%; 
 

 
    /* Used so the menu drop down can be placed absolutely */ 
 
    position: relative; 
 
    border: 1px solid #B2BEB5; 
 
    text-align:center; 
 
    height: 43px; 
 
} 
 

 
.top li { 
 
    list-style: none; 
 
    display:inline-block; 
 
    text-align: center; 
 
} 
 

 
/* Style links in nav bar */ 
 
.top > li > a { 
 
    color: #fff; 
 
    font-weight: 700; 
 
    text-decoration: none; 
 
    line-height: 43px; 
 
    height:43px; 
 
    padding: 0 15px; 0 15px; 
 
    text-transform: uppercase; 
 
    font-family: 'Noto Serif', serif; 
 
    letter-spacing:1.5px; 
 
    font-size:15px; 
 
} 
 

 
.top > li:hover { 
 
text-decoration:underline; 
 
} 
 

 
/* On hover show the menu drop down */ 
 

 
/* Position the menu drop down relative to the nav bar */ 
 
.top > li > div { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 41px; 
 

 
    /* Don't show unless the nav bar li is hovered */ 
 
    display: none; 
 
    background: #fff; 
 
    padding: 10px 10px; 
 
    box-shadow: 2px 4px 4px rgba(0,0,0,0.4); 
 

 
    /* Hide anything that might be outside the div */ 
 
    overflow: hidden; 
 
} 
 

 
/* End of Navigation Bar Styling */ 
 

 
/* Drop Down Menu Styling */ 
 

 
.navmain { 
 
    width: 100%; 
 
    border: 1px solid #B2BEB5; 
 
} 
 

 
.nav-divider { 
 
    display: inline-block; 
 
    width: 1.8%; 
 
} 
 

 
.nav-focus-art { 
 
    display: inline-block; 
 
    width: 20%; 
 
    vertical-align: top; 
 
    text-align: left; 
 
    animation-duration: 4s; 
 
} 
 

 
.nav-art-author, .nav-art-title { 
 
    display: inline-block; 
 
    padding: 5px 0px; 
 
} 
 

 

 
.nav-art-title { 
 
    font-size: 1.4em; 
 
} 
 

 
.nav-art-image { 
 
    display: inline-block; 
 
} 
 

 
.nav-divider-2 { 
 
    display: inline-block; 
 
    width: 3.8%; 
 
} 
 

 
.nav-headlines { 
 
    display: inline-block; 
 
    width: 40%; 
 
    font-size: 1.2em; 
 
    font-weight: bold; 
 
    text-align: left; 
 
    padding-right: 3px; 
 
} 
 

 
.nav-headline-link { 
 
    border-bottom: 1px solid #B2BEB5; 
 
    padding: 0 0 5px 0; 
 
} 
 
.nav-headline-text { 
 
    padding: 10px 0px; 
 
    font-family: 'Arapey', serif; 
 
color:#000000; 
 
font-size:17px; 
 
font-weight:400; 
 
} 
 

 
.nav-art-author { 
 
    font-size: 15px; 
 
    text-decoration:none; 
 
} 
 

 
a.nav-text-link:link,a.nav-text-link:visited,a.nav-text-link:hover,a.nav-text-link:active{ 
 
text-decoration:none; 
 
color:#603c68; 
 
font-weight:400; 
 
}  
 
a.nav-text-link:hover{ 
 
text-decoration: none; 
 
font-weight:700; 
 
} 
 

 
.nav-headline-link:last-child { 
 
    border-width: 0px; 
 
} 
 

 
.nav-links { 
 
    display: inline-block; 
 
    width: 20%; 
 
    vertical-align: top; 
 
    text-align: left; 
 
} 
 

 
.nav-link { padding-bottom: 20px;} 
 

 
.nav-empty-cell { padding-top: 40px;} 
 

 
.nav-headline-link:first-child { 
 
    color: #bfa76a; 
 
    font-size:40px; 
 
    font-family: 'Playfair Display', serif; 
 
    font-weight:700; 
 
} 
 

 
.nav-link:first-child { 
 

 
} 
 

 
/* End of Drop Down Menu Styling */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <ul class="top" id="ddm"> 
 
    <li><a href="#">home</a></li> 
 
    <li class="menuitem"><a href="#">bras</a> 
 
    <div class="navmain"> 
 
     <div class="nav-divider"></div> 
 
\t  <div class="nav-headlines"> 
 
     <div class="nav-headline-link">BRAS</div> 
 
     <div class="nav-headline-text">Gi&#275; Gi&#275; specializes in finding comfortable, well fitting, beautiful bras for all women. Come and experience a professional bra fitting with one of our certified fitters. We have a fabulous selection of amazing bras, sizes ranging from 28 inch to 56 inch bands and AA to J cups!!</div> 
 
     </div> 
 
     <div class="nav-divider-2"></div> 
 
     <div class="nav-focus-art"> 
 
     <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Push-up Bra</a></span><br> 
 
     </div> 
 
     <div class="nav-divider-2"></div> 
 
     <div class="nav-focus-art"> 
 
     <span class="nav-art-author"><a href="#" class="nav-text-link">Post-surgical Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br> 
 
\t \t <span class="nav-art-author"><a href="#" class="nav-text-link">Bralettes</a></span><br> 
 
     </div> 
 
     <div class="nav-divider-2"></div> 
 

 
    </div> <!-- End of nav-main --> 
 
    </li> 
 
    <li><a href="#">MASTECTOMY</a></li> 
 
</ul>

删除CSS代码

/* On hover show the menu drop down */ 
.top > li:hover > div { 
    display: block; 
} 

无论如何，你正在使用slideDown & slideUp到display & hide，所以需要CSS property。

希望这会帮助你。