Question

我想要做的是逐个显示li文本我让我们说标签1，标签2，标签3 ...第一次在标签3之后显示标签2之后标签1等等...一个接一个......

我在其上工作的代码是：

HTML：

<ul>
    <li>tag 1</li>
    <li>tag 2</li>
    <li>tag 3</li>
    <li>tag 4</li>
    <li>tag 5</li>
</ul>

Jquery的

$(document).ready(function(){
    $('ul > li').each(function(){
        $(this).hide().delay(1000).fadeIn(1850);
        _self = $(this);
        $.ajax({
            url     : '/echo/json/',
            data    : {
                text : _self.val()
            },
            type    : 'POST',
            success : function(response) {
                _self.css('color','red');
            }
        });
    });
});

http://jsfiddle.net/FWZKF/2/

Answer 1

增加每个元素的延迟：

$('ul > li').each(function(i){
        $(this).hide().delay(i*1000).fadeIn(1850);}
  //more code
);

Answer 2

您可以使用动画回调转到下一个元素，如下所示：

http://jsfiddle.net/xuKH3/

    iterator( $('ul > li').hide().first() );
    function iterator( el ) {
        el.fadeIn(1850, function() { iterator( el.next() ); } )
    }

Answer 3

一些事情：

.delay()只会延迟动画。它实际上并没有延迟你的代码。只有在前一个完成之后处理每个<li>，或者通过延迟<ul>中较低元素的淡入淡出来使其看起来那样。
_self是一个全局变量（你省略了var），所以所有的回调都只会使最后一个元素变成红色，因为_self的值将是他们被叫的时间。您需要将其设置为回调函数的本地。

Answer 4

另一种方法，不像Dr.Molle那样伟大。

http://jsfiddle.net/FWZKF/8/

$(document).ready(function(){
    $('li').hide();
    var shown = $('ul > li:first');
    shown.hide().delay(1000).fadeIn(1850);
    setInterval(function(){
        if(shown.next().length){
            shown = shown.next();
             shown.hide().delay(1000).fadeIn(1850);
        }
    },2000);
});

Answer 5

我为此使用css transition-delay属性，并为每个<li>元素使用scss递增

https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

    $delay-increment: 0.3;
    $delay: 0-$delay-increment;

    @for $i from 1 through 10 { //adding transition delays to provide sequential icons show on profile load
        li:nth-child(#{$i}) {
            transition-delay: #{$delay+$delay-increment}s;

            &:after{
                transition-delay: #{$delay+$delay-increment}s;
            }
        }

        $delay: $delay + $delay-increment;
    }

显示<li>我只使用JS来设置负责不透明度变化的类show

参见下面编译sass的示例：

$('.show').click(function() {
  $('ul').toggleClass('show');
})

li:nth-child(1) {
  transition-delay: 0s;
}

li:nth-child(2) {
  transition-delay: 0.3s;
}

li:nth-child(3) {
  transition-delay: 0.6s;
}

li:nth-child(4) {
  transition-delay: 0.9s;
}

li:nth-child(5) {
  transition-delay: 1.2s;
}

li:nth-child(6) {
  transition-delay: 1.5s;
}

li:nth-child(7) {
  transition-delay: 1.8s;
}

li:nth-child(8) {
  transition-delay: 2.1s;
}

li:nth-child(9) {
  transition-delay: 2.4s;
}

li:nth-child(10) {
  transition-delay: 2.7s;
}

ul>li {
  opacity: 0;
  transition: opacity .4s;
}

ul.show>li {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='show'>Show</button>

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

如何用jquery一个一个地展示li

5 个答案: