Jquery 悬停与 setTimeout

Question

我有一个水平导航菜单，我想在用户的鼠标停留在按钮上 1 秒钟时显示工具提示。或者换句话说，我希望提示出现时有一个延迟。当用户将鼠标移开时，工具提示应立即消失。 Stumbleupon 的工具栏是我希望其发挥作用的一个示例。

javascript:

$("a.btn").hover(
    function() {
        var tip = $(this).parent().children(".tip-wrapper");
        setTimeout(function{
            tip.show();
        }, 1000)
    },
    function {
        var tip = $(this).parent().children(".tip-wrapper");
        tip.hide();
    }
);

html:

<th title="">   
    <a href="#" class="btn">
        <span class="person">Firstname Lastname</span>
    </a>

    <div class="tip-wrapper">
        <div class="tip-border">
            <div class="tip">
               tool tips go here
            </div>
        </div>
    </div>  
</th>

我看过很多教程，但不明白为什么我的教程不起作用。

Answer 1

如果鼠标在超时发生之前移开，您将立即 hide() 它，然后在超时运行后 show() 它。

相反，您应该使用 hoverIntent 插件，该插件为你做这个。

Answer 2

你有一些语法错误： function { 应该是 function() { （同样适用于 setTimeout(function{ =>; setTimeout (函数(){);
我建议使用一个引用超时函数的变量。这样，如果用户未将元素悬停至少一秒，您可以停止工具提示的显示。 ：

var timeout;
$("a.btn").hover(
    function() {
        var tip = $(this).siblings(".tip-wrapper");
        timeout = setTimeout(function(){
            tip.show();
        }, 1000);
    },
    function() {
        // prevent the tooltip from appearing
        clearTimeout(timeout);
        var tip = $(this).siblings(".tip-wrapper");
        tip.hide();
    }
);

另外，您应该在开始时隐藏工具提示。 是一个实时工作示例。

只要您已经在项目中使用 jquery，我建议您利用它并使用它的动画功能。这样，您的代码就变成：

$("a.btn").hover(
    function(){
        $(this).siblings('.tip-wrapper').fadeIn(1000);
    },
    function(){
        $(this).siblings('.tip-wrapper').stop().hide();// or fadeOut();
    }
);

ps：使用 .siblings() 而不是 .parent().children()

Answer 3

首先，您的脚本中存在一些语法错误（如 gion_13 所示）。

其次，为了确保如果用户在超时完成之前将鼠标移开，工具提示不会错误显示，您需要使用一个变量来存储超时，以便您可以在 hover 中清除它 的 handlerOut 参数。

工作小提琴。