Текстовая анимация приостанавливается и продолжается

Question

Таким образом, приведенный ниже код - это то, что я использую, чтобы вставлять текст влево и вправо в одно и то же время. К сожалению, я не могу приостановить первую анимацию после ее завершения. Мне нужна задержка после первого набора анимаций.

Я пробовал задержки, setTimeout и setInterval, но ничего не работает (спасибо @evan за идеи). Кто-нибудь знает, как я могу это сделать?

Вот пример того, что ниже делает код: jsfiddle example

$(function() { 

    var num = 0; 
    var wordTrue = true; 
    var words = [ 
     {left: "SLAM", right: "FACE"}, 
     {left: "BOOST", right: "JAMZ"} 
    ]; 

    var fadel = $('#fadel'); 
    var fader = $('#fader'); 

    animate(); 

    function animate() { 
     var leftword = words[num].left; 
     var rightword = words[num].right; 

     var first = leftword.slice(0, leftword.indexOf(" ")); 

     first = "<span class=\"g h\">" + first + "</span>"; 

     var lastWords = leftword.substring(leftword.indexOf(" ") + 1); 

     var finalString = first + lastWords; 

    fadel 
     .stop() 
     .css('top', '18px') 
     .css('left', '0') 
     .css('opacity', 0) 
     .text(leftword).show(); 

    fader 
     .stop() 
     .css('top', '68px') 
     .css('left', '400px') 
     .css('opacity', 0) 
     .text(rightword).show(); 

    fadel.animate({ 
     opacity: 1, 
     left: '150px' 
     }, 2700, function() { 
      fadel.fadeOut("fast", function() { 
      queueNext().delay(5000); 
     }); 
    }); 

    fader.animate({ 
     opacity: 1, 
     left: '250px' 
    }, 2700, function() { 
      fader.fadeOut("fast"); 
     }); 
    } 

    function queueNext() { 
     if (++num == words.length) 
     num = 0; 

     animate(); 
    } 
}); 

Answer 1

setTimeout Используйте в вашей queueNext функции.

function queueNext() 
{ 
    if (++num == words.length) 
     num = 0; 
    setTimeout(animate, 3000); //delay duration (in milliseconds) 
} 

ДЕМО: http://jsfiddle.net/dirtyd77/xPXqV/2/