var sentence = $('.sentence');

var words = $('.word-row');

var defaultDelay = 500;

var interval = 0;

var waitingTime = 1000;

var firstTimeout = 0;

var secondTimeout = 0;

var animationSpeed = 300;

var wordClass = ".word-row";

​

words.each(function (index, elem) {

    var $self = $(elem);

    var delay = $self.data('delay') || defaultDelay;

​

    interval += delay || defaultDelay;

​

    if ($self.parent().hasClass('sentence-1'))

        firstTimeout += delay;

​

    if ($self.parent().hasClass('sentence-2'))

        secondTimeout += delay;

});

​

function resetAll(){

    sentence.show();

    words.css({width: 0});

}

​

function startSentence(callback) {

    resetAll();

    if(typeof (callback) == "function"){

        callback();

    }

    var first = setTimeout(function () {

​

        animateWords($('.sentence-1'), function(){

            clearTimeout(first);

        });

​

    }, 0);

​

​

    var second = setTimeout(function () {

​

        animateWords($('.sentence-2'), function(){

            clearTimeout(second);

            setTimeout(startSentence, waitingTime);

            if(typeof (callback) == "function"){

                callback();

            }

​

        });

​

    }, firstTimeout);

​

}

​

function animateWords(sentence, callback) {

    var wordDelay = 0;

​

    var sentenceWords = sentence.find(wordClass);

​

    sentenceWords.each(function (wIndex, word) {

        var $word = $(word);

​

        wordDelay += defaultDelay;

​

​

        if (wIndex == 0)

            wordDelay = 0;

​

        var wordTimeout = setTimeout(function () {

​

            $word.stop(true, true).animate({

                width: "100%"

            }, {

                done: function() {

​

                    if( (sentenceWords.length-1) == wIndex)

                    {

                        if( typeof (callback) == "function")

                            callback();

​

                        setTimeout( function() {

                            $(sentence).hide();

                            $(sentence).find(wordzClass).css('width', 0);

                        },  animationSpeed+100);

​

                    }

​

                    clearTimeout(wordTimeout);

​

                }

            });

​

            }, wordDelay);

​

    });

}

​

startSentence();