jQuery悬停以无限循环改变各种背景，直到鼠标移出

Question

我有一个带有背景图像的

，它将更改背景 4 次，延迟 300 毫秒。我尝试过使用 setTimeout ，它似乎工作正常，但是clearTimeout(t);当鼠标移出时由于背景继续变化而失败。

$(document).ready(function() {
    $(".image").hover(function(){
        var obj = $('.image');
        $(this).css("background-position", "0 -90");
        var t=setTimeout(function(){obj.css("background-position", "0 -180")}, 300);
        var t=setTimeout(function(){obj.css("background-position", "0 -270")}, 600);
        var t=setTimeout(function(){obj.css("background-position", "0 -360")}, 900);
    }, function() {
        $(this).css("background-position", "0 0");
        clearTimeout(t);
    });
});

我也想在悬停函数中插入一种无限循环的方法，直到释放鼠标。

对不起我的学校英语。

提前致谢！

Answer 1

将 t var dec 移到函数之外。那么它就会在闭包中。

例如这样的：

$(document).ready(function() {
    var t1,t2,t3;

    $(".image").hover(function(){
        var obj = $('.image');
        $(this).css("background-position", "0 -90");
        var t1=setTimeout(function(){obj.css("background-position", "0 -180")}, 300);
        var t2=setTimeout(function(){obj.css("background-position", "0 -270")}, 600);
        var t3=setTimeout(function(){obj.css("background-position", "0 -360")}, 900);
    }, function() {
        $(this).css("background-position", "0 0");
        clearTimeout(t1);
        clearTimeout(t2);
        clearTimeout(t3);
    });
});

这段代码还有其他问题，但我只是回答这个问题。

Answer 2

因为这样变量t会被前两个setTimeout覆盖两次，所以只保留最后一个setTimeout的代码，所以当您调用 clearTimeout 仅清除最后一个 setTimeout。

您可以做的是使用三个不同的变量来存储它，改为 setInterval ，或者使用循环来设置超时。

Answer 3

你试过jquery的animate吗？可能会简化很多事情——他们会为你处理所有的计时器和东西。它已融入您已经使用的库中，所以为什么不利用它呢？

$('.image').mouseover(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 -360px)"}, 
        {duration:1800})
    })
.mouseout(function(){
    $(this).stop().animate(
        {backgroundPosition:"(0 0)"}, 
        {duration:100})
    });

默认情况下，它将使用线性动画，但您可以设置不同的缓动，如果您想要一些不同的东西。