javascript - 如何让导航栏顺畅流动？

Question

当在导航栏上从一个主题转到另一个主题时，我想要一个元素的下拉菜单，但我希望它从一个元素平滑地流动到另一个元素，而不是让它出现一秒钟的故障。

<nav class="navbar">
<div class="navbar_item" data-navitem="1">
<h3>Link 1</h3>
</div>
<div class="navbar_item" data-navitem="2">
<h3>Link 2</h3>
</div>
<div class="navbar_item" data-navitem="3">
<h3>Link 3</h3>
</div><div class="navbar_item" data-navitem="4">
<h3>Link 4</h3>
</div>

  <div class="navbar_item_subitem closed" data-subnavitem="1">
  <h1>Internal contnet</h1>
  </div>
  <div class="navbar_item_subitem closed" data-subnavitem="2">
  <h1>Internal contnet 2</h1>
</div>



</nav>

CSS:

 .navbar_item{
 background-color: gray;
 width: 20%;
 float:left;
 }

.navbar_item_subitem
{
 overflow-y: hidden;
max-height: 100px; /* approximate max height */
width: 100%;
background: green;
height: 0;
}

JS

$('.navbar_item').hover(
function(){
$('.navbar_item_subitem').css('height',0);
var item = $(this).data("navitem");
$('.navbar_item_subitem[data-subnavitem='+item+']').animate({
  'height':'100'
}, 2000)

},
function(){
var item = $(this).data("navitem");
$('.navbar_item_subitem[data-subnavitem='+item+']').animate({
  'height':'0'
}, 500)
}
)

http://jsfiddle.net/n24ff6xq/

所以我只希望每个链接之间的流程更顺畅，而不是出现空白。谢谢你

Answer 1

试试这个:http://jsfiddle.net/n24ff6xq/1/

$('.navbar_item_subitem').animate({
      'height':'0'
}, 50);