Question

简单地说，这个代码在元素悬停时启动。当它悬停时，我添加一个类并显示该元素，然后在5秒后，我反向翻转：即我淡出我之前显示的内容并删除我之前添加的类。

$("#it").addClass('somestyle').show();
setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

我的代码是干净还是黑客？
如果I元素在这5个延迟秒内再次悬停，如何取消那些延迟动作（淡出和类删除）。如果它再次徘徊，我不希望计划的延迟行动真正发生。

Answer 1

宣布退出职能

    var timer;

然后在函数内部：

$("#it").addClass('somestyle').show();
clearTimeout(timer);
timer=setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

首先使用此代码清除超时，然后再次设置，以便在触发此功能时再次等待。

Answer 2

本文介绍了许多关于悬停时淡化/动画的方法：

http://greg-j.com/2008/07/21/hover-fading-transition-with-jquery/

另见样品的外观：

http://greg-j.com/static-content/hover-fade-redux.html

此问题还有一个类似的问题here：

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});

Answer 3

你可以在悬停时设置一个标志，所以在悬停时

IsHovering = 1;

当悬停结束时，

IsHovering = 0;

然后只运行超时中的代码

 if(IsHovering==0)

jquery如果发生某事，则取消延迟（setTimeout）事件

3 个答案: