javascript - 悬停时 jQuery 滚动文本

Question

我有一个“a”元素，我想在鼠标悬停时向左滚动。为此，我删除了第一个字符并将其附加到字符串的末尾。

如何连续启动滚动功能？

鼠标进入元素 -> scroll() 被触发，直到鼠标离开元素或用户点击它。

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

使用 setInterval() 从 mouseenter 重复调用它，然后使用 clearInterval() 在 mouseleave 时停止它:

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

请注意，您不需要在 scroll() 函数中使用 $(ele)，因为 ele 已经是一个 jQuery 对象:

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

演示:http://jsfiddle.net/hTBZn/

如果您使用 .text() 方法的回调语法(或者甚至将该行直接移到.hover 代码):

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

演示:http://jsfiddle.net/hTBZn/1/