文字動畫暫停和繼續

Question

所以下面的代碼是我使用有文本幻燈片中從左至右，並在同一時間出現在正確的東西。不幸的是，我無法在第一個動畫完成後暫停第一個動畫。第一組動畫之後我需要延遲。

我已經試過了延遲，setTimeout和setInterval的功能，但似乎沒有任何工作（感謝@evan您的想法）。有誰知道我可以做到這一點？

這裏是什麼下面的代碼做了例子：在你的queueNext功能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。

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

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