Анимационный список с jQuery

Question

У меня действительно простая проблема с jQuery (я думаю). Но я совершенно новый для jQuery и с трудом решал это.

У меня есть список

<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ul> 

каждые 5 секунд я хотел бы повернуть это. Таким образом, каждый предмет движется вверх (первый попадает на последнее место).

Какой самый простой способ решить эту проблему?

Answer 1

setInterval(function() { 
    $("ul").append($("ul li:first")); 
}, 5000); 

Вы должны указать идентификатор <ul>, чтобы сделать его однозначным. See it in action.

Answer 2

Дайте ul идентификатор так:

<ul id="myList"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ul>​ 

Затем вы можете использовать эту JQuery с setTimeout():

var list$ = $("#myList"); 
function rotateList() { 
    list$.find("li:first").appendTo(list$); 
    setTimeout(rotateList, 5000); 
} 

rotateList(); 

Демонстрация здесь: http://jsfiddle.net/jfriend00/KVzXa/ (работает 1 раз в секунду для целей демонстрации).

Или, это также может быть сделано с setInterval(), как это:

var list$ = $("#myList"); 
setInterval(function() { 
    list$.find("li:first").appendTo(list$); 
}, 5000); 

Я решил сэкономить немного процессора в обоих реализациях кэшируя $ («# MyList»), а не перезапустив его на каждом обороте.

Answer 3

Демо: http://jsfiddle.net/yXRpJ/

Answer 4

Использование jQuery.animate:

function menu() { 
    $menu = $('#menu'); 
    $first = $menu.find("li").first(); 
    $first.animate({marginTop:-1 * $first.height()}, 1000, 'linear', function() { 
     $menu.append($first); 
     $first.attr('style', ''); 
    }); 
} 
setInterval("menu()", 5000); 

http://jsfiddle.net/c4UhX/

Answer 5

Самый простой способ, чтобы получить хороший анимации с Quicksand плагин для JQuery:

Это будет выглядеть следующим образом:

var lis = $('ul.list').children('li').get(); 

$('ul.list').quicksand($('<ul>').append(lis).children()); 

setInterval(function(){ 
    lis.push(lis.shift()); 
    $('ul.list').quicksand($('<ul>').append(lis).children()); 
}, 5000); 

Вам также необходимо добавить атрибут "данные-ID" в ваших li «с таким Quicksand может оживить их красиво:

<ul class="list"> 
    <li data-id="item1">Item 1</li> 
    <li data-id="item2">Item 2</li> 
    <li data-id="item3">Item 3</li> 
    <li data-id="item4">Item 4</li> 
</ul> 

JS Fiddle