所以我在 .mouseout
和 .mouseover
上有一个动画 gif,3 秒后我想在那里有一个静止图像。我使用的方法是更改 div
的 background-image
,因此我有四个图像:
- 当页面加载时(我在普通的 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()
但我不知 Prop 体如何使用,任何帮助都会受到赞赏。
最佳答案
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中的超时,以防鼠标在三秒内再次进入。
关于jquery - jquery代码错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12146363/