帶時間延遲的文本循環

我想一次又一次地旋轉文本，就像一個報價旋轉器一樣，但我想用不同的緩動和動畫來做它我發現了一種方式，但它太長了，一旦所有的文本結束它不再去一次。如果有人能告訴我一個短的路，它會理解帶時間延遲的文本循環

$('.first').addClass('animated fadeInUp'); 
      setTimeout(function() 
      { 
       $('.second').show().addClass('animated fadeInUp');}, 1500 
      ); 
      setTimeout(function() 
      { 
       $('.first').show().addClass('animated fadeOutUp');}, 3000 
      ); 
      setTimeout(function() 
      { 
       $('.second').show().addClass('animated fadeOutUp');}, 4500 
      ); 
      setTimeout(function() 
      { 
       $('.third').show().addClass('animated fadeInLeft');}, 6000 
      ); 
      setTimeout(function() 
      { 
       $('.fourth').show().addClass('animated fadeInLeft');}, 7500 
      ); 
      setTimeout(function() 
      { 
       $('.third').show().addClass('animated fadeOutRight');}, 9000 
      ); 
      setTimeout(function() 
      { 
       $('.fourth').show().addClass('animated fadeOutRight');}, 10500 
      );

來源

2016-07-02 Naizam Shahzada

jQuery不好適合複雜的鏈接動畫。我建議熟悉[GreenSock的動畫插件]（https://greensock.com/gsap） – Miro

你有HTML代碼嗎？不能'弄清楚你在做什麼......什麼意思是旋轉的？它應該是什麼樣子？ –

您可以使用設置，而不是設置超時時間間隔

的Javascript

var animations = ['fadeInUp', 'fadeOutUp', 'fadeInLeft', 'fadeInRight']; 
$(function(){ 
    var i = 0; 
    var timer = window.setInterval(function(){ 
    $('.mydivs div').eq(i).addClass('animated').addClass(animations[i]); 
    if(i++ == 3) 
    window.clearInterval(timer); 
}, 1500); 
});

HTML

<div class="mydivs"> 
    <div class="">first</div> 
    <div class="">second</div> 
    <div class="">third</div> 
    <div class="">fourth</div> 
</div>

來源

2016-07-02 19:01:26 Kld

我試圖用不同的動畫在這種情況下，他們都會有相同的動畫 –

@NaizamShahzada檢查更新的代碼，你可以添加一個不同的動畫到每個div。 – Kld

帶時間延遲的文本循環

回答

相關問題