Animation within animation

Question

I have animation that works like this:

 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>

Every 5 seconds you get the toggle change of the words array. What I'd like to create, but I'm failing, is to have the toggle, then change few words in the .words span that are located in the words_array, and then after I've changed all the words, the toggle will happen, to the second sentence in the words array, and now I'll change the .words with the associated words_array and so on (if I have more sentences/words).

So the animation goes like this:

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

And I could add as much words/slides as I want.

Doing one (just changing the words) or the other (sliding the sentence) is rather easy, but combining them is where I am stuck :\

EDIT:

I using the solution provided I tweaked the code a bit:

    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>

Added another animation in the words toggle. Thanks somethinghere for all the help!!

Answer 1

How about adding another timeout that will simply loop through the current available words? When you switch the arrays, simple reset the loop and let it check the correct amount of words. Notice in the snippet how the function switchSentence and switchWords are entirely unrelated. The switchWords function makes use of the currently selected sentence, and the swicthSentence function does the changing of the sentence, as the name suggests. This way you don't really have to know how to align them properly, they will do their job regardless. Have a look at the snippet:

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>

I also decided to clean up your code a bit to make it more legible and useable. I moved the two switching functions into separate functions and passed them to the interval listeners separately. This is so I could immediately kickstart them by calling them once myself. I also streamlined your array, and moved the style declaration into your CSS instead of inline styles (which makes both your JS and CSS look a lot cleaner).