Hello Guys！

Question

Hello Guys！

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

HTML CODE

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

JQUERY CODE

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

感谢提前

Answer 1

您不需要timereset个内容，只需在对象上调用stop()即可停止上一个效果：

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

根据新评论进行更新：

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

Answer 2

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

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

请记住，如果fadeOut / In已经通过使用停止启动，那么最终可能会出现半透明元素。

修改

以下是一个示例：http://jsfiddle.net/Qchqc/

Answer 3

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

Answer 4

的jQuery

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

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

定时器复位功能不起作用！

Hello Guys！

感谢提前

4 个答案:

的jQuery