text animate on mouseover, stop и reset on mouseout

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"]; 

Но когда парения удаляется, он останавливается очередь анимации и сбрасывает, чтобы показать «это» снова.

Это то, что я до сих пор:

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