Loop through items. How?

[torbentschechne]

Hello, I have an array of three text elements, the function should take the first one, animates it, fades out, take the second one, animates it etc. When I use this code, it only animates "Companies". I do not see the other values... Does somebody know why?

Thank you!

jQuery(document).ready(function($){

  var texts = ['Bloggers', 'Entrepreneurs', 'Companies'];

  $.fn.extend({
    animateCss: function (animationName) {
      var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
      $(this).addClass('animated ' + animationName).one(animationEnd, function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  });

  function animateFunction(item, index) {
    $('.fp-animated-subheadline').html(item);
    $('.fp-animated-subheadline').animateCss('fadeInDown');
  };

  texts.forEach(animateFunction);

});

[tnga]

there isn't a delay to change your texts, so changes are instantaneously done, and at the end, your human eye just see the text "Companies" which is the last occurrence. Maybe this can help.

function animateFunction (item, index) {
    //this may replace a text after 3s and animate it, `index time` (here 3 texts = three time).
    setTimeout( function (text) {
       $('.fp-animated-subheadline').html(text);
       $('.fp-animated-subheadline').animateCss('fadeInDown');
    }, 3000*index, item) ;
  };