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

您可以使用set interval而不是set timeout

<强>的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>

文本旋转时间延迟

1 个答案: