텍스트 애니메이션 일시 중지 및 계속

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) 
} 

DEMO : http://jsfiddle.net/dirtyd77/xPXqV/2/