0

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

我工作的代码是这样的：

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/

4

5 回答 5

4

增加每个元素的延迟：

$('ul > li').each(function(i){
        $(this).hide().delay(i*1000).fadeIn(1850);}
  //more code
);
于 2013-07-28T05:59:55.713 回答
1

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

http://jsfiddle.net/xuKH3/

    iterator( $('ul > li').hide().first() );
    function iterator( el ) {
        el.fadeIn(1850, function() { iterator( el.next() ); } )
    }
于 2013-07-28T06:16:38.573 回答
0

另一种方法，不如 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);
});
于 2013-07-28T06:09:33.633 回答
0

一些东西：

  • .delay()只会延迟动画。它实际上并没有延迟您的代码。要么仅在前一个完成后处理每个，要么<li>通过将淡入淡出延迟更长的时间来处理<ul>.
  • _self是一个全局变量（您省略了var），因此所有回调只会使最后一个元素变为红色，因为这就是_self它们被调用时的值。您需要将其设置为回调函数的本地。
于 2013-07-28T06:01:13.397 回答
0

我为此使用 csstransition-delay属性，并使用 scss 为每个<li>元素增加它

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>

于 2017-09-04T15:20:18.373 回答