Question

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

Answer 1

尝试这样的事情：的setTimeout（函数（）{ $（ “IMG-保持器 ”）淡出（“ 慢”）。 }，10000）;

Answer 2

更新了新要求：

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

Answer 3

你也可以这样做

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

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

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

如果鼠标不移动，如何使叠加淡出？

3 个答案: