错误代码jquery

所以我在

.mouseout

和

.mouseover

上有一个动画gif，3秒钟后我想在那里有一个静止图像。我使用的方法是更改

div的
背景图像
，因此我有四个图像：

加载页面时（我在普通css文件中执行此操作）
鼠标结束时（应该设置动画，我正在执行jQuery）
鼠标退出时（应该设置动画，我正在执行jQuery）
鼠标移出事件后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（）
，但我不知道如何使用，非常感谢您的帮助

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);
    }
});

当鼠标离开时设置一个定时器，在三秒后改变背景，并清除鼠标中的定时器，以防鼠标在三秒内再次进入。
这看起来很不错，但当我将其放入jQuery文件时，它就完全停止工作了？您使用的是jQuery 1.7版或更高版本吗，最后，我使用了一些旧版本，现在当我下载最新版本时，它起了作用。非常感谢大家。如果答案对你有帮助，请记住接受它。