Пользовательский интерфейс jQuery: анимировать вкладки горизонтального списка навигации без атрибута float?

Question

Пользовательский интерфейс jQuery: анимировать вкладки горизонтального списка навигации без атрибута float?

0

<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 для горизонтального display:inline-block. Я хочу анимировать вкладки, чтобы одна вкладка отображалась одновременно на экране горизонтально.

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

Тем не менее, это сначала отображается по вертикали, прежде чем выравнивать их по горизонтали, чего я не хочу. Изменение его на плавающий список работает, но я не хочу его использовать. Нужно ли анимировать вкладки с пользовательским интерфейсом jQuery без использования атрибута float?

user3064776 03 июнь 2014, в 00:16

Источник

Теги:

jquery

jquery-ui

2 ответа

Ещё вопросы

lindsay · Answer 1 · 2014-06-03T03-26-00.000Z

Возможно, более удобна настройка левой позиции ваших вкладок? По общему признанию, это немного сложнее, но не использует 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;
}

Kris Erickson · Answer 2 · 2014-06-02T20-17-00.000Z

Попробуйте оживить их непрозрачность...

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

в js

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