Question

I have a “a” element that I want to scroll left on hover. To do this I remove the first character and append it to the end of the string.

How can I continuously fire up the scroll function?

Mouse enters element -> scroll() is fired until mouse leaves the element or user clicks on it.

html:

<a href="foo.htm" class="scrollthis">this text scrolls on hover</a>

jQuery:

$(".scrollthis").hover(function(){
    scroll($(this));

});

function scroll(ele){

    var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
    $(ele).text(s);
}

Answer 1

Use setInterval() to call it repeatedly from mouseenter, then clearInterval() to stop it on mouseleave:

var intervalID;
$(".scrollthis").hover(function(){
    var $this = $(this);
    intervalID = setInterval(function() {
       scroll($this);
    }, 100);
}, function() {
    clearInterval(intervalID);
});

Note that you don’t need to use $(ele) in your scroll() function because ele is already a jQuery object:

function scroll(ele){
    var s = ele.text().substr(1)+ele.text().substr(0,1);
    ele.text(s);
}

Demo: http://jsfiddle.net/hTBZn/

You can make your scroll() function a bit neater if you use the callback syntax of the .text() method (or even move that one line directly into the .hover code):

function scroll(ele){
    ele.text(function(i,val) { return val.substr(1) + val.substr(0,1); });
}​

Demo: http://jsfiddle.net/hTBZn/1/