如果鼠标不移动，你如何使覆盖层淡出？

我目前正在使用下面的代码，使一个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>

来源

2013-11-21 user2972047

固定的手段？ –

是固定在主div内的任何地方.img holder – user2972047

更新了新的要求：

$(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

来源

2013-11-21 19:25:38 brbcoding

这似乎工作，但你怎么得到它淡入淡出，而不必将鼠标完全移动到div的外面并再次返回？任何方式让它淡入div内的运动？ – user2972047

当然，更新我的答案是这样做的。 – brbcoding

太棒了！谢谢！ – user2972047

尝试是这样的：的setTimeout（函数（）{$ （ “IMG-持有人。 ”）淡出（“ 慢”）; }，10000）;

来源

2013-11-21 19:17:56 rogerlsmith

这还不够，你需要在mousemove中完成它，并清除每个事件的计时器。 – Wil

你可以像下面这样做在特定的x，y位置或在div任何地方太

var timer; 
var x=3000; // in ms 

$(document).on('mousemove', function() { 
    clearTimeout(timer); 

    timer = setTimeout(function() { 
     $(".overlay").stop(true, true).fadeOut(); 
    }, x); 
});

来源

2013-11-21 19:30:25 Manish

如果鼠标不移动，你如何使覆盖层淡出？

回答

相关问题