javascript - 将项目悬停一秒后对图像进行动画处理

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'));
});

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