jquery - jquery代码错误

Question

所以我在 .mouseout 和 .mouseover 上有一个动画 gif，3 秒后我想在那里有一个静止图像。我使用的方法是更改​​ div 的 background-image，因此我有四个图像:

1. 当页面加载时(我在普通的 css 文件中执行此操作)
2. 当鼠标悬停时(应该是动画，我正在做这个 jQuery)
3. 当鼠标移出时(应该是动画，我正在做这个 jQuery)
4. 鼠标移出事件后 3 秒(应该是正常的)

我被困在 4 上，不知道如何编写代码，所以这是我对 2 和 3 的代码:

    $("#ubBackground").hover(function(){
        $(this).stop().css("background-image","url(img/userBoxMouseOver.gif)");},
            function(){
      $('#ubBackground').css('background-image','url(img/userBoxMouseOut.gif)');
                        }
    );

我认为我应该使用 .delay() 但我不知 Prop 体如何使用，任何帮助都会受到赞赏。

Answer 1

var timer;

$("#ubBackground").on({
    mouseenter: function(){
        clearTimeout(timer);
        $(this).css("background-image","url(img/userBoxMouseOver.gif)");
    },
    mouseleave: function() {
        var self=this;
        $(this).css('background-image','url(img/userBoxMouseOut.gif)');
        timer = setTimeout(function() {
            $(self).css('background-image','url(img/userBox3secLater.gif)');
        }, 3000);
    }
});

设置一个定时器，当鼠标离开时，三秒后改变背景，并清除mouseenter中的超时，以防鼠标在三秒内再次进入。