Question

我正在寻找以下问题的解决方案： Om鼠标悬停在div上。在mouseout上它再次淡出。简单，这是有效的，但我想设置一个条件，即只有鼠标悬停不会在设定的时间内再次发生，例如2秒，才会发生淡出。简单的延迟（）不起作用，因为它无论如何都会发生......如果事件在这段时间内触发，有没有办法设置某种计时器来取消运行中的函数？

Answer 1

$('#foo').hover(function() {
    var $bar = $('#bar');
    clearTimeout($bar.data('fadeOutTimer'));
    $bar.fadeIn();
}, function() {
    var $bar = $('#bar');
    $bar.data('fadeOutTimer', setTimeout(function() {
        $bar.fadeOut();
    }, 3000));
});

演示：http://jsfiddle.net/5oLcfzj1/

Answer 2

虽然这可能真的没用，但为了增加jQuery答案的对比，我做了一个纯粹的JavaScript答案....

document.getElementById("test").onmouseover = function(){
  this.style.opacity = "1";
  if (typeof exTimeout !== "undefined") clearTimeout(exTimeout);
}

document.getElementById("test").onmouseleave = function(){
  exTimeout = setInterval(function(){
    document.getElementById("test").style.opacity = "0"
  }, 2000);
}

Live example

（旁注，这只会改变不透明度，因此它仍会占用页面上的物理空间，并且还需要使CSS3过渡变得平滑）

Answer 3

<div class=container1></div>
<div class=container2></div>

$('container1').mouseover(function(){
    $('container2').show(500);
});
$('container1').mouseout(function(){
    setTimeout(function(){
        $('container2').hide(500);
    }, 2000);
});

除非在设定时间内鼠标悬停，否则淡出鼠标

3 个答案: