Question

默认情况下，我们有一个隐藏的块和链接。当我们将鼠标悬停在链接上时，其rel属性会像文本一样阻止。

我正在尝试做什么：

If link is hovered and block is invisible {
    show block by fadeIn;
    change text inside block (get it from link's rel);
} else {
    just change text inside block (block is already visible, no fadeIn effect);
}

If link is unhovered and block is visible {
    start timeout {
        after 2 seconds hide block by fadeOut;
    }
}

以下是我目前所拥有的内容：http://jsfiddle.net/Bt3mL/1/

一切正常，但有一个问题 - 如果某些链接目前悬停，则fadeOut上的mouseleave不应该启动。像超时重置这样的东西可能很有用，但我不明白如何将它添加到我的代码中。

现在，当我悬停一个链接然后将其解锁时，超时开始，但如果我在其他链接上悬停而块可见，则因为第一个超时块可以隐藏。

请帮忙。

Answer 1

清除超时将解决问题：http://jsfiddle.net/jomanlk/veufa/

var __TIMER = null;

$("a").live('mouseenter', function(){
    clearTimeout(__TIMER);
    if ($("div").css('display')=='none'){

        $("div").html($(this).attr("rel"));
        $("div").fadeIn('fast');

    } else {
        $("div").html($(this).attr("rel"));
    }

})

$("a").live('mouseleave', function(){ 

    __TIMER = setTimeout(function(){
        $("div").fadeOut('fast');
    }, 1000);

});

Answer 2

试试这个：

var cancelHide = false;
$("a").live('mouseenter', function(){
    cancelHide = true;
    if ($("div").css('display')=='none'){

        $("div").html($(this).attr("rel"));
        $("div").fadeIn('fast');

    } else {
        $("div").html($(this).attr("rel"));
    }

})

$("a").live('mouseleave', function(){ 
    cancelHide = false;
    setTimeout(function(){
        if(cancelHide){ return; }
        $("div").fadeOut('fast');
    }, 1000);

});

通过jQuery在超时时隐藏块

2 个答案: