代码之家 › 专栏 › 技术社区 › mikepenz

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

jquery-animate hover jquery javascript

mikepenz · 技术社区 · 14 年前

我问你,如果你知道我的错误在哪里,在一些人试图让这项工作开始后。

这是我的代码,直到现在:

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

两个都是自己做的,但如果我把它们放在一起,就什么都没有了。

2 回复 | 直到 14 年前

Yisroel 14 年前

有一个很好的插件可以做到这一点: hoverIntent . 替换.hover为.hoverintent,您不必手动处理设置和清除超时。

SLaks 14 年前

里面 setTimeout 回调, this 不引用悬停元素。

要解决这个问题,您需要在事件处理程序中创建一个单独的变量,如下所示:(pun-intended)

$(".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 但你也可以。