动画动画

Question

我有这样的动画：

​

 var words_array = [];
 words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
 words_array[1] = ['WEB', 'WORLD'];

 var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
   'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
 ];

 $('#caption').html(words[0]);

 var i = 0;
 setInterval(function() {
   $('#caption').animate({
     width: 'toggle'
   }, {
     duration: 400,
     done: function() {
       $('#caption').html(words[i = (i + 1) % words.length]);
     }
   }).delay(300).animate({
     width: 'toggle'
   }, 400);
 }, 5000);

body {
  background: #333;
}
#caption {
  height: 200px;
  font-size: 80px;
  line-height: 100px;
  color: #fff;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>

​

每5秒你就会得到单词数组的切换。我想要创建的东西，但我失败了，就是让切换，然后更改.words跨度中位于words_array中的几个单词，然后在我更改了所有单词之后，切换到words数组中的第二句，现在我将用关联的words_array来更改.words等等(如果我有更多的句子/单词)。

所以动画是这样的：

First 'slide': We are FUN
                      CREATIVE <- only this changes
                      INNOVATIVE
Slide toggle to second 'slide': We like the WEB
                                            WORLD

我可以随心所欲地添加更多文字/幻灯片。

做一个(只是改变单词)或另一个(滑动句子)是相当容易的，但是组合它们是我陷入困境的地方:\

编辑：

我使用该解决方案，只要稍微调整一下代码：

​

    var words_array = [];
    words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
    words_array[1] = ['WEB', 'WORLD'];

    var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
      'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
    ];

    var $caption = $('#caption'),
      i = 1,
      w = 0,
      $replace = $caption.find('.words');

    function switchSentence() {
      $caption.animate({
        width: 'toggle'
      }, {
        duration: 400,
        done: function() {
          i = (i + 1) % words.length;
          w = 0;
          $caption.html(words[i]);
          $replace = $caption.find('.words');
        }
      }).delay(300).animate({
        width: 'toggle'
      }, 400).delay(300);
    }

    switchSentence();

    function switchWord() {
      if (w >= words_array[i].length - 1) {
        switchSentence();
        w = 0;
      } else {
        w += 1;
      }

      if (words_array[i]) {
        $replace.animate({
          width: 'toggle'
        }, {
          duration: 400,
          done: function() {
            $replace.text(words_array[i][w]);
          }
        }).delay(300).animate({
          width: 'toggle'
        }, 400);
      }
    }

    switchWord();
    setInterval(switchWord, 2500);

body {
  background: #333;
}
#caption {
  height: 200px;
  font-size: 80px;
  line-height: 100px;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: top;
}
.words {
  display: inline-block;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="caption"></div>

​

在单词切换中添加了另一个动画。谢谢你的帮助！！

Answer 1

添加一个简单地循环当前可用单词的超时如何？切换数组时，简单地重置循环并让它检查正确的字数。注意，在代码片段中，函数switchSentence和switchWords是完全不相关的。switchWords函数使用当前选定的句子，而swicthSentence函数负责句子的更改，顾名思义。这样你就不必真正知道如何正确地对齐他们，他们无论如何都会做好他们的工作。看一看片段：

​

var words_array = [
    ['FUN', 'CREATIVE', 'INNOVATIVE'],
    ['WEB', 'WORLD']
];

var words = [
    'We are <span class="words fun">FUN</span>',
    'We like the <span class="words like">WEB</span>'
];

var caption = $('#caption'), 
    i = 1, 
    w = 0, 
    replace = caption.find('span');

function switchSentence() {
     caption.animate({width: 'toggle'},{
        duration: 400,
        done: function() {
            i = (i + 1) % words.length;
            w = 0;
            caption.html(words[i]);
            replace = caption.find('span');
        }
    }).delay(300).animate({width: 'toggle'}, 400);
}

switchSentence();
setInterval(switchSentence, 5000);

function switchWord(){
    if(w >= words_array[i].length - 1) w = 0;
    else w += 1;
    if(words_array[i]) replace.text(words_array[i][w])
}

switchWord();
setInterval(switchWord, 500);

body {
  background: #333;
}
#caption {
  height: 200px;
  font-size: 80px;
  line-height: 100px;
  color: #fff;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
}
.fun, .like { font-weight: bold; }
.fun { background: #F33B65; }
.like { background: #8be32d; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>

​

我还决定稍微清理一下您的代码，使其更容易阅读和使用。我将这两个切换函数移动到单独的函数中，并将它们分别传递给interval侦听器。这样我就可以马上给他们打一次电话。我还简化了您的数组，并将样式声明移动到CSS中，而不是内联样式(这使您的JS和CSS看起来都更干净)。