Jquery 悬停隐藏/显示：setTimeout clearTimeout答案

【问题标题】：Jquery hover hide/show: setTimeout clearTimeoutJquery 悬停隐藏/显示：setTimeout clearTimeout
【发布时间】：2012-11-02 18:14:33
【问题描述】：

所以我有一个元素（链接），它通过将鼠标悬停在另一个元素（目标）上来控制它的可见性。当鼠标悬停链接时，目标应该变为可见，当鼠标离开时，目标应该在 2 秒后变为不可见。

到目前为止一切顺利。但是我该如何做到这一点，如果鼠标在 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/)

任何帮助将不胜感激。

干杯

【问题讨论】：

标签： jquery hover settimeout

【解决方案1】：

尝试重构您的代码：

(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 中看到的那样。

我从您的代码中删除的几个错误：

您在mouseleave 处理程序之一中声明了另一个timer var，它无法在任何地方取消。 timer 必须在公共范围内可访问；
您在同步方法.css之前应用了动画延迟，这没有效果；
在fadeOut 完成后将display 设置为none 没有意义，它会自动这样做；
setTimeout 在执行后也没有任何意义。

【讨论】：

感觉非常接近，但造成错误行为的事件仍然存在。忘记在原帖中提及了。如果您在离开后立即悬停链接，则超时不会清除。换句话说。如果您从链接区域快速进出，目标 div 仍然会继续运行，并且有时会产生一些不稳定的行为。
当然，我忘了分配 timer var 大声笑我不好。 @PedroGonçalves 刚刚更新了我的代码和小提琴。

【解决方案2】：

您使用了过多的延迟和淡出持续时间。浏览器不喜欢它。你介意用 hide() 代替那些吗？

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

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

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

【讨论】：