Javascript 如何使导航条顺畅流动？

当在导航栏上从一个主题切换到另一个主题时，我想要一个项目的下拉菜单，但我希望它从一个项目平稳地切换到另一个项目，而不是一秒钟内出现故障

<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>

JS

所以我只希望在每个链接之间有一个更平滑的流，而不是出现空白。谢谢

试试这个：

 .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;
}

$('.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)
}
)

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