如果鼠標不移動，你如何使覆蓋層淡出？

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

如果鼠標不移動，你如何使覆蓋層淡出？

回答

相關問題