Question

我有<div>的背景图片，会将背景改变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的代码，所以当你调用{{1}时你只是在清除最后一个clearTimeout。

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

Answer 3

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

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

默认情况下，它会使用liniar动画，但如果你想要不同的东西，你可以设置不同的easing。

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

3 个答案: