Hi, folks

I'm new to jQuery, so maybe it's a simple thing, but I couldn't find how to do it.

I have the following code that makes a word to change continuously when the mouse is over that particular word, but I can't stop it when the mouse leaves the same word. Considering that there are several words on my text that triggers the same behavior, things become messy when all words change at the same time.

Is there a way to stop the function when the mouse leaves a word?

Thanks a lot!

var terms = ["WORD 1","WORD 2","WORD 3","WORD 4"];

function rotateTerm() 

{

var ct = $("#rotate").data("term") || 0;

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

}

/////////////////////////////

$(document).ready(function() {

$('#rotate').mouseover(function(){

 $.fn.funcao_a();

 });

$.fn.funcao_a = function() {

 var ct = $("#rotate").data("term") || 0;

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

 }

});