如果你的鼠标没有，你如何使覆盖淡出'不要动

How do you make an overlay fade out if your mouse doesn't move?

本文关键字：淡出 覆盖 何使 鼠标 如果      更新时间：2023-09-26

我目前正在使用下面的代码使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);
});
相关文章：