2

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

  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(),但我不知道具体如何,任何帮助表示赞赏。

4

1 回答 1

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

于 2012-08-27T17:13:23.063 回答