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

最简单的方法是使用jQuery的Quicksand插件获得一个漂亮的动画：

看起来像这样：

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

您还需要为li添加“data-id”属性，以便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

Answer 4

function rotate(){
    $('li').first().detach().appendTo($('ul'));
    setTimeout(rotate, 1000); 
}

rotate();

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

Answer 5

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

使用jQuery制作动画列表

5 个答案: