Проблемы с получением сценария 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);
        });

Спасибо всем большое за любую помощь заранее,

Дан.

Answer 1

Вы объявляете hide() функция после того, как вы вызываете его с помощью setTimeout, Просто поместите декларацию перед setTimeout вызов.

Кроме того, когда вы передаете строку кода в качестве первого аргумента setTimeout, это становится evalредактор eval это зло Просто передайте объект функции:

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

Answer 2

В новом коде 2 проблемы

1. Внутри функции hide контекст $(this) отличается от того, когда он вызывается внутри функции mouseout.
2. Во-вторых, функция скрытия определяется как анонимная функция внутри функции 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);
}