错误的代码jquery

Question

所以我在.mouseout 和.mouseover 上有一个动画 gif，3 秒后我想在那里有一个静止图像。我用的方法是把div的background-image改一下，这样我就有了四张图片：

1. 页面加载时（我在普通的 css 文件中这样做）
2. 当鼠标悬停时（应该是动画，我正在做这个 jQuery）
3. 当鼠标不在时（应该是动画并且我正在做这个 jQuery）
4. mouseout 事件后 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()，但我不知道具体方法，感谢任何帮助。

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中的timeout，以防鼠标在三秒内再次进入。