Question

经过一段时间试图让它发挥作用，我问你，如果你知道我的错误在哪里。

这是我的代码，直到现在：

$(".menu a").hover( function () {
  $(this).data('timeout', setTimeout( function () {
        $(this).hover(function() {
            $(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});

我会对一些帮助感到高兴。

我尝试了这个，但它不起作用。还有一个信息可能会让它更清晰。我之前有这样的功能：

$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");  
}, function() {
    $(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});

它有效，但所以它会被视为不可思议。所以我发现这个设置一个计时器，它只显示弹出窗口，在这个例子中一秒钟之后：

$("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {
    alert('You have been hovering this element for 1000ms');
  }, 1000));
}, function () {
  clearTimeout($(this).data('timeout'));
});

两者都是自己工作但是如果我把它们放在一起它什么都不做

Answer 1

在setTimeout回调中，this未引用悬停元素。

要解决此问题，您需要在事件处理程序中创建一个单独的变量，如下所示:(双关语）

$(".menu a").hover( function () {
    var me = $(this);

    me.data('timeout', setTimeout( function () {
        me.hover(function() {
            me.next("em").animate({opacity: "show", top: "-65"}, "slow");  
        }, function() {
            me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
        });
  }, 1000));
}, function () {    
    clearTimeout($(this).data('timeout'));
});

您不需要在内部me处理程序中使用hover，但您也可以。

Answer 2

这是一个很好的插件：hoverIntent。用.hoverIntent替换.hover，你不必手动处理设置和清除超时。

在将项目悬停一秒后为图像设置动画

2 个答案: