我目前正在使用下面的代码使div类.overlay
在悬停在div上时淡入…
当你没有悬停在它上面时,它会逐渐消失。
如果你的指针在"x"时间内静止不动,我怎么能让它淡出呢?
<script>
$(document).ready(function() {
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
更新了新要求:
$(document).ready(function() {
var timer = 0,
idleThreshold = 1;
setInterval(function(){
if(timer > idleThreshold) {
$('.overlay').stop(true, true).fadeOut();
} else {
timer++; }
}, 1000);
$('.img-holder').on("mousemove", function(){
if(timer == 0) {
$(".overlay").stop(true, true).fadeIn();
}
timer = 0;
});
$(".img-holder").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".img-holder").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
DEMO
试试这样的方法:setTimeout(function(){$(".img holder").fadeOut("慢速");},10000);
你也可以这样做
var timer;
var x=3000; // in ms
$(document).on('mousemove', function () {
clearTimeout(timer);
timer = setTimeout(function () {
$(".overlay").stop(true, true).fadeOut();
}, x);
});