在jquery中逐个显示LI项目

Question

<ul>
    <li>AS-1</li>
    <li>QW-2</li>
    <li>PQ-3</li>
</ul>

li{
  display: inline-block;
}


$('li').hide().each(function( i ) {  
  $(this).delay( i * 400 ).fadeIn().siblings().next('li:first');  
});

Answer 1

你可以这样做：

function fadeLi(elem) {
    elem.delay().fadeIn().delay(1500).fadeOut(500, function () {
        if (elem.next().length > 0) {
            fadeLi(elem.next());
        } else {
            fadeLi(elem.siblings(':first'));
        }
    });
}

$(function () {
    $('ul li').hide();
    fadeLi($('ul li:first'));
});

<强> Fiddle Demo