如何用jquery逐個顯示li

我試圖做的一件事就是逐個顯示li文本我可以說標籤1，標籤2，標籤3 ...第一次在標籤後顯示標籤2之後2該標籤3等等......一個接一個......如何用jquery逐個顯示li

的代碼，我就可以工作，這是什麼：

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/

來源

2013-07-28 Mihai Viteazu

url：'/ echo/json /'？ –

ajax呼籲什麼？如果你只需要fadein –

增加各元素延遲：

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

來源

2013-07-28 05:59:55

剛剛完成這個：http://jsfiddle.net/FWZKF/5/，你擊敗了我，很好的答案。 – abc123

謝謝！這是我尋找的！感謝abc123和Dr.Molle –

有幾件事情：

.delay()只能延緩動畫。它實際上並不會延遲您的代碼。只有在前一個完成之後，纔會對每個<li>進行處理，或者通過延長<ul>中較低元素的衰退時間來使其看起來如此。
_self是一個全局變量（您省略了var），所以所有的回調都只會使最後一個元素變爲紅色，因爲這就是_self的值在他們被調用時的值。您需要將其設置爲回調函數的本地。

來源

2013-07-28 06:01:13 Blender

fadeIn是一個動畫 –

@Dr。Molle：是的。據我所知，OP正在嘗試使用它，就像一個'sleep（）'函數。 – Blender

另一種方法，不如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-28 06:09:33

您可以使用動畫回調到下一個元素，像這樣：

http://jsfiddle.net/xuKH3/

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

來源

2013-07-28 06:16:38

我使用CSS transition-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負責不透明性變化

看到以下，總結上海社會科學院例如：

$('.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-04 15:20:18 godblessstrawberry

如何用jquery逐個顯示li

回答

相關問題