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/

＆＃13;

＆＃13;

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

＆＃13;

* {
  /* 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 */

＆＃13;

<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>
	    <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>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
		<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>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br>
		<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>

＆＃13;

＆＃13;

＆＃13;

删除了CSS代码

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

无论如何，您正在使用slideDown＆amp; slideUp至display＆amp; hide，因此需要CSS property。

希望这会对你有所帮助。