jquery - 错误的代码jquery

Question

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

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