與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>一個ID以使其無歧義。 See it in action.

Answer 2

給這個ul像這樣的ID：

<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中」），而不是重新運行它每轉來保存兩種實現很少的CPU。

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是如此流沙可以很好地它們的動畫：

<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