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

【问题标题】：Animate an Image after hovering an item a second将项目悬停一秒后为图像设置动画
【发布时间】：2010-04-25 17:27:11
【问题描述】：

经过一些尝试后，我问你，如果你知道我的错误在哪里。

这是我到目前为止的代码：

$(".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'));
});

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

【问题讨论】：

为什么要添加第二个悬停处理程序？你到底想做什么？

标签： javascript jquery hover jquery-animate

【解决方案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，但您也可以这样做。

【讨论】：

【解决方案2】：

有一个很好的插件可以做到这一点：hoverIntent。将 .hover 替换为 .hoverIntent，您无需手动设置和清除超时。

【讨论】：