带时间延迟的文本循环

我想一次又一次地旋转文本，就像一个报价旋转器一样，但我想用不同的缓动和动画来做它我发现了一种方式，但它太长了，一旦所有的文本结束它不再去一次。如果有人能告诉我一个短的路，它会理解带时间延迟的文本循环

$('.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

带时间延迟的文本循环

回答

相关问题