Question

<ul id="nav">
   <li>Tab 1</li>
   <li>Tab 2</li>
   <li>Tab 3</li>
</ul>

#nav li {
   display:inline-block;
   list-style:none;
}

此水平导航菜单使用display:inline-block将它们水平放置。我想为选项卡设置动画，以便在屏幕上以水平方式一次显示一个选项卡。

$("#nav li").hide().each(function(i) {
     $(this).delay(500*i).show("bounce", 2000);
});

然而，在水平对齐之前，它首先垂直显示一个，这不是我想要的。将其更改为浮动列表有效，但我不想使用它。无论如何使用jQuery UI为标签设置动画而不需要使用float属性吗？

Answer 1

尝试设置不透明度的动画......

<ul id="nav">
   <li>Tab 1</li>
   <li>Tab 2</li>
   <li>Tab 3</li>
</ul>

#nav li {
   display:inline-block;
   list-style:none;
   opacity: 0;
}

中的

$("#nav li").each(function(i) {
   $(this).delay(500*i).animate({opacity: 1}, 2000, "bounce");
});

Answer 2

也许调整标签的左侧位置更合适？不可否认，它有点复杂，但它没有使用float DEMO。

这基本上是通过position: absolute和调整left值的组合来完成的。

/*jQuery*/

$( "#nav li" ).each(function(i) {
   $(this).delay(500 * i).animate({ left: 80 * i}, 2000);
});

/*CSS*/
#nav {
   width: 240px;
   height: 40px;
   padding: 0;
   overflow: hidden;
   position: relative;
   background: rgba(111, 111, 111, .3);
}

#nav li {
   left: -60px;
   width: 60px;
   list-style: none;
   display: inline-block;
   background: rgba(255, 255, 255, .5);
   padding: 10px;
   position: absolute;
   text-align: center;
}

jQuery UI：为没有float属性的水平导航列表的选项卡设置动画？

2 个答案: