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

如何使导航栏流畅？

1 个答案: