0

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

任何帮助将不胜感激。

干杯

4

2 回答 2

4

尝试重构您的代码：

(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);

}());

现场演示

这应该非常接近您描述的行为。我还添加了一条额外的行，以便mouseenter在它淡出时立即显示它，正如您在handlerIn.

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

  • 您在其中一个处理程序中声明了另一个timervar mouseleave，无法在任何地方取消。timer必须在公共范围内可访问；
  • 您在同步方法之前应用了动画延迟.css，这没有效果；
  • 在 a 完成后设置displayto是没有意义的，它会自动这样做；nonefadeOut
  • setTimeout在它执行之后也没有必要清除 a 。
于 2012-11-02T18:29:44.893 回答
0

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

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

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

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

于 2012-11-02T18:22:06.110 回答