【问题标题】：Timer Reset Function Not Working!定时器复位功能不起作用！
【发布时间】：2011-05-13 07:27:35
【问题描述】：

大家好！

我一直在尝试为我最新的 jQuery 插件创建一个简单的示例代码，但它似乎根本不起作用！谁能告诉我哪里出错了？或者任何人都可以为我提供一个新功能来做到这一点。所以我的问题是，当我将鼠标悬停在一个分类为trigger 的元素上时，另一个分类为eg 的元素应该fadeIn(); 但是如果用户在分类为eg 的元素淡入之前取出鼠标，它不应该再淡入，但这根本不起作用。我不知道出了什么问题？请帮帮我。（下面是我的问题 HTML 和 Jquery 代码！）

HTML 代码

<div class="trigger">MouseOverMe</div>
<div class="eg">See Me!</div>

JQUERY 代码

function timereset(a)
{
 var elem = $('.'+a);
 if(elem.data('delay')) { clearTimeout(elem.data('delay')); }
}

$(document).ready(function () {
   $('div.eg').hide();
    $('div.trigger').mouseover(function () {
        $('div.eg').delay(1000).fadeIn();
    }); 
    $('div.trigger').mouseout(function () {
       timereset('eg');
       $('div.eg').fadeOut();
    });
});

提前致谢

【问题讨论】：

标签： javascript jquery html jquery-plugins

【解决方案1】：

你不需要timereset的东西，只需在对象上调用stop()，之前的效果就会停止：

http://api.jquery.com/stop/

根据新评论更新：

$('div.trigger').mouseout(function () {
   $('div.eg').stop().hide();
});

【讨论】：

抱歉，如果用户将鼠标移出元素，我希望它不会显示，而是随着您的代码淡入然后淡出。

【解决方案2】：

jQuery

$('.trigger').hover(function() {
    $('.eg').delay(1000).fadeIn();
}, function() {
    $('.eg').stop(true, true).hide();
});

小提琴： http://jsfiddle.net/UJBjg/1

【讨论】：

【解决方案3】：

另一种选择是清除排队的功能，例如：

$('div.trigger').mouseout(function () {
       $('div.eg').queue('fx', []);
       $('div.eg').fadeOut();
    });

请记住，如果淡出/淡入已经通过使用 stop 开始，您最终可能会得到一个半透明的元素。

编辑

这是一个例子：http://jsfiddle.net/Qchqc/

【讨论】：

【解决方案4】：

var timer = -1;
$(document).ready(function () {
   $('div.eg').hide();
    $('div.trigger').mouseover(function () {
        timer = window.setTimeout("$('div.eg').fadeIn(function() { timer = -1; });",1000);
    }); 
    $('div.trigger').mouseout(function () {
       if(timer != -1)
          window.clearTimeout(timer);

       $('div.eg').fadeOut();
    });
});

【讨论】：