與jQuery動畫列表

我有一個非常簡單的jQuery問題（我猜）。但即時通訊完全是新的jQuery和很難解決這個問題。與jQuery動畫列表

我有一個列表

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

每5秒我想旋轉此。所以每個項目都會向上移動（第一個到最後一個地方）。

哪一種解決此問題最簡單的方法？

來源

2012-02-21 johan

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

您應該給<ul>一個ID以使其無歧義。 See it in action.

來源

2012-02-21 23:13:31 Tomalak

但這隻會運行一次。 – Supr 2012-02-21 23:16:10

@Supr不，它會每5秒運行一次。（哎呀，你是對的，我打算使用'setInterval'，而不是'setTimeout'。固定，謝謝。） – Tomalak 2012-02-21 23:16:29

'detach（）'在這裏不需要。 – jfriend00 2012-02-21 23:19:14

給這個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。

來源

2012-02-21 23:13:13 jfriend00

演示：http://jsfiddle.net/yXRpJ/

來源

2012-02-21 23:14:34 Supr

使用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/

來源

2012-02-21 23:30:06

最簡單的方法是讓一個漂亮的動畫與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

來源

2012-02-21 23:37:48 Paulpro

漂亮的動畫，+1：D – 2012-02-21 23:41:21

與jQuery動畫列表

回答

相關問題