Jquery悬停隐藏/显示：setTimeout clearTimeout

所以我有一个元素（链接），通过悬停在它上面来控制另一个元素（目标）的可见性。当鼠标悬停链接时，目标应该转为可见状态，当鼠标离开时，目标应在2秒后变为不可见状态。Jquery悬停隐藏/显示：setTimeout clearTimeout

到目前为止这么好。但我该如何做到这一点，以便在2秒钟之前将鼠标悬停在可见目标上方时，目标保持可见状态？

我用setTimeout和clearTimeout搞定了一些工作，但它确实很麻烦，而且感觉不太好。

var time = 1000; 
$(".link").hover(

     function() { 
     $('.target').css('display', 'none'); 
     clearTimeout($(this).data('timeout')); 
      $('.target').css({'display': 'block'}); 
     }, 

     function() { 

     var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time); 

     $('.target').hover(
       function() { 
       clearTimeout(timer); 
       }, 
       function() { 
       var timer = setTimeout(function() {$('.target').fadeOut(1000).delay(100).css('display', 'none'); clearTimeout(timer); }, time); 
       } 
      );   
     } 

);

（http://jsfiddle.net/VfDkq/）

任何帮助，将不胜感激。

干杯

来源

2012-11-02 Pedro Gonçalves

尝试重新分解代码中的位：

(function() { 

    var time = 1000, 
     timer; 

    function handlerIn() { 
     clearTimeout(timer); 
     $('.target').stop(true).css('opacity', 1).show(); 
    } 
    function handlerOut() { 
     timer = setTimeout(function() { 
      $('.target').fadeOut(3000); 
     }, time); 
    } 

    $(".link, .target").hover(handlerIn, handlerOut); 

}());

Live demo

这应该是非常接近你的描述的行为。当您在mouseenter淡出时，我还添加了一条额外的线条，以便在handlerIn中看到。

一对夫妇的错误，我从你的代码带走：

给你另一个timer var声明内mouseleave处理程序，不能在任何地方取消之一。 timer必须可以在一个共同的范围内访问;
您在同步方法.css之前应用了动画延迟，但没有任何效果;
在fadeOut完成后，将display设置为none毫无意义，它会自动完成;
在执行任一操作后，没有必要清除setTimeout。

来源

2012-11-02 18:29:44

感觉真的很接近，但是创造马车行为的事件仍然存在。忘了在原帖中提及它。如果您在离开后立即将链接悬停，则超时不会清除。换句话说。如果你真的很快从链接区域进出，那么目标div仍然会走路，有时它会产生一些不稳定的行为。 –

我明白了。这很奇怪，我会检查代码。 –

当然，我忘了分配'定时器'var变焦我的坏。 @PedroGonçalves刚刚更新了我的代码和小提琴。 –

您正在使用太多延迟和淡出持续时间。浏览器不喜欢它。你介意用hide（）而不是那些？

http://jsfiddle.net/VfDkq/4/

var timer = setTimeout(function() {$('.target').hide().css('display', 'none'); clearTimeout(timer); }

或者你可以减少延迟时间和持续时间淡出。

来源

2012-11-02 18:22:06 srijan

它似乎并没有解决它，但谢谢。 –

Jquery悬停隐藏/显示：setTimeout clearTimeout

回答

相关问题