Question

所以我有一个元素（链接）通过将鼠标悬停在其上来控制另一个元素（目标）的可见性。当鼠标悬停链接时，目标应该变为可见，当鼠标离开时，目标应在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/）

非常感谢任何帮助。

干杯

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

我从你的代码中删除了一些错误：

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

Answer 2

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

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

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

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

Jquery hover hide / show：setTimeout clearTimeout

2 个答案: