使具有用户交互功能的 jQuery .mouseenter()/.mouseleave() 脚本正常工作时出现问题

Question

首先，对标题表示歉意，我想不出合适的标题。

我不确定为什么下面代码中的 hide() 函数在触发时会在 firebug 中返回错误，我很确定一旦解决了这个缺陷，代码的其余部分将正常工作，任何帮助/建议将不胜感激。

Firebug 控制台错误：

hide is not defined
it-services() it-services (line 396)
time = setTimeout("hide()",3000); 

到目前为止我所拥有的代码：

        var time;

        $("#form").mouseenter(function() {
            clearTimeout(time);
            $(this).delay(800).animate({
                right: 0
            }, 2000);
        }).mouseleave(function() {
            function hide() {
                $(this).delay(800).animate({
                    right: "-325px"
                }, 1000);
            }
            time = setTimeout(hide,3000);
        });

非常感谢大家提前提供的帮助，

Dan。

Answer 1

您在使用 setTimeout 调用 hide() 函数后声明它。只需将声明放在 setTimeout 调用之前即可。

此外，当您将一串代码作为第一个参数传递给 setTimeout 时，它会被 eval 编辑。 eval 是邪恶的。只需传递函数对象：

function hide() {
    $(this).delay(800).animate({
        right: "-325px"
    }, 1000);
}
time = setTimeout(hide, 3000);

Answer 2

新代码中有两个问题

1. 在 hide 函数中，$(this) 的上下文与
   当它在 mouseout 函数内部被调用时。
2. 其次， hide 函数被定义为 mouseout 函数内部的匿名函数，

我觉得如果它是在 mouseover 事件处理函数之外声明的函数会更有意义。这样您就可以从 setTimeOut 以及 mouseout 事件处理程序全局引用它。尝试下面的代码。我相信这应该可以解决问题，或者至少让您领先一步。

var time;
var $form;

$("#form").mouseenter(function() {
    $form = $(this);
    clearTimeout(time);
    $(this).delay(800).animate({
        right: 0
    }, 2000);
}).mouseleave(function() {
    hide();
    time = setTimeout(hide,1000);
});
function hide() {
    $form.delay(800).animate({
        right: "-325px"
    }, 3000);
}