在鼠標懸停上的文字動畫，停止並在鼠標懸停時重置

Question

我正在尋找一些靜態的文本，但是當用戶將鼠標懸停在文本上時，它會通過不同單詞的數組進行動畫製作，用戶刪除他們的鼠標。

我得到這個其他SO後的幫助很遠：

changing text periodically in a span from an array with jquery

但不能得到循環隊列停止並懸停被刪除後回到原來的單詞。

我想有一個句子，如這樣的：

<p>Here is a sentence <span id="rotate">this</span> is what changes</p> 

因此，如果用戶將鼠標懸停在「此」，那麼它動畫由衰落/出去的換句話說，例如數組：

var terms = ["newword1", "newword2", "newword3"]; 

但是當懸停被移除時，它將停止動畫隊列並重置以再次顯示「this」。

這是我到目前爲止有：

var terms = ["term 1", "term 2", "term 3"]; 

function rotateTerm() { 
    var ct = $("#rotate").data("term") || 0; 
    $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn() 
    .delay(2000).fadeOut(200, rotateTerm); 
}; 

主要從其他SO發佈，但已經改變了觸發：

$("#rotate").mouseenter(function(){ 
    $(rotateTerm); 
}); 

$("#rotate").mouseleave(function(){ 
}); 

所以現在這個觸發鼠標懸停，這是偉大的，但是我無法在「mouseleave」函數中放置現在正在運行的旋轉文本。

Answer 1

我認爲你在尋找這樣的事情：

var terms = ["term 1", "term 2", "term 3"], 
    interval; 

function displayNext() { 
    var ct = $("#rotate").data("term") || 0; 
    $("#rotate").fadeOut(200); 
    setTimeout(function() { 
    $("#rotate").data("term", ct == terms.length - 1 ? 0 : ct + 1).text(terms[ct]).fadeIn(); 
    }, 190); 
}; 

function rotateTerm() { 
    displayNext(); 
    interval = setInterval(function() { 
    displayNext(); 
    }, 2000); 
} 

$("#rotate").mouseenter(function() { 
    rotateTerm(); 
}); 

$("#rotate").mouseleave(function() { 
    clearInterval(interval); 
    setTimeout(function() { 
    $('#rotate').text('this'); 
    }, 200); 
}); 

工作小提琴：here