jquery - 刷新时随机淡入淡出列表

Question

HTML

<ul id="content">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
    <li>fifth</li>
    <li>sixth</li>
</ul>

jQuery

function InOut( elem )
{
 elem.delay('1')
     .fadeIn('3000')
     .delay('5000')
     .fadeOut(
               function(){
                   if(elem.next().length > 0)
                   {InOut( elem.next() );}
                   else
                   {InOut( elem.siblings(':first'));}

                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

这是 gaby 的作品，下面是他的小提琴

这是小提琴http://jsfiddle.net/gaby/S5Cjm/1/

只是想知道如何随机列表和刷新，所以这意味着一切都是随机的

Answer 1

只需添加以下内容即可随机化列表。这样做的好处是列表每次都会以相同的顺序淡入淡出，并且每个项目将至少循环一次，因为淡入淡出函数不是随机的，而是列表本身。

$(function(){
    // randomize the list
    var list = $("#content"),
        items = $("#content > li"),
        len = items.length;

    while(len--){
        var ran = Math.floor(Math.random()*len);
        list.append(items[ran]);
    }

    // hide it and do the fades.
    $('#content li').hide();
    InOut( $('#content li:first') );

});

现场演示

Answer 2

你可以这样做：http: //jsfiddle.net/S5Cjm/1180/

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay()
     .fadeOut( 
               function(){                    
                   InOut($(jQuery("li").get().sort(function(){ 
                      return Math.round(Math.random())-0.5
                    }).slice(0,1)))                         
                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

​</p>

Answer 3

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay()
     .fadeOut( 
               function(){ 
                   if(elem.siblings().length > 0)
                   {InOut( $(elem.siblings('*')[Math.floor(Math.random() * elem.siblings().length)]));}
                   else
                   {InOut( elem.siblings(':first'));}

                 }
             );
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

使用 Math.random() 可以解决您的问题。有关示例，请参见上面的代码。

希望这可以帮助！

Answer 4

我更新了你的小提琴：

http://jsfiddle.net/S5Cjm/1179/

JS

function InOut( elem )
{
    var ran = Math.floor((Math.random()*6)+1);
 elem.delay().fadeIn().delay().fadeOut(function(){ 
     InOut(elem.parent().find('li:nth-child('+ran+')'));
 });
}

$(function(){
$('#content li').hide();
InOut( $('#content li:first') );

});

Answer 5

(function() {
    $('p').show();
    var lis = $('li').hide();

    $('a').click(function() {
        var i = 0;
        (function displayImages() {
            lis.eq(i++).fadeIn(200, displayImages);
        })();
    });

})();