jquery - 文本随时间延迟旋转

Question

我想像引号旋转器一样一次又一次地旋转文本，但我想用不同的缓动和动画来做，我找到了一种方法，但它太长了，一旦所有文本结束，它就不会再旋转了。如果有人能告诉我一个简短的方法，我将不胜感激

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

Answer 1

您可以使用设置间隔而不是设置超时

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>