JQuery функция не происходит при наведении мыши - PullRequest
Новая
       32

JQuery функция не происходит при наведении мыши

1 голос
/ 13 марта 2012

Я пытаюсь сделать небольшую анимацию для веб-сайта, над которым я работаю, но при том способе, которым я ее построил, при наведении курсора мыши на элемент контейнера, анимация все равно происходит. Как мне узнать, что мышь на самом деле не зависает?

HTML-код: 

<div id="badge">
    <div id="slogan">
        <p>We sell for less!</p>
    </div>
    <div id="icon"></div>
    <div id="name"></div>
    <div id="TMhold">
        <div id="TM"></div>
    </div>
</div>

и это jQuery, который я использую: 

$("#badge").hover(
    function() {
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500 );
        setTimeout(function(pee) {
            $('#badge p').stop(true,true).animate({opacity: .99}, 760, "easeOutQuart");
        }, 800 );
    },
    function() {
        clearTimeout(pee);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");
        setTimeout(function() {
            $('#badge').stop(true,true).animate({width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({ top: "-13px"}, 500, "easeOutQuart");
        }, 300 );   
    }
);

Я читал о функции clearTimeout, но я не уверен, применимо ли это к моему решению.

Большое спасибо за любую помощь или разъяснение!

1 Ответ

0 голосов
/ 13 марта 2012

Я потратил немного времени на то, чтобы изменить структуру JavaScript, чтобы увидеть, что на самом деле происходит, и я думаю, что вижу, чего вам не хватает. Метод setTimeout возвращает значение для представления установленного таймера. Если вы не уловите это значение, вы не сможете отменить таймер.

Вместо вызова setTimeout( function(pee)... измените его на захват возвращаемого значения, а затем используйте это значение в вызове clearTimeout. 

var hoverTimerId;

$("#badge").hover(
    function(){
        $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart");
        setTimeout(function() {
            $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart");
        }, 500);
        hoverTimerId = setTimeout(function() {
           $('#badge p').stop(true,true).animate({ opacity: .99}, 760, "easeOutQuart");
        }, 800);
    },
    function(){
        clearTimeout(hoverTimerId);
        $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart");

        setTimeout(function() {
            $('#badge').stop(true,true).animate({ width: "90px"}, 900, "easeOutQuart");
            $("#TM").stop(true,true).animate({top: "-13px"}, 500, "easeOutQuart");
        }, 300);
    }
);

ПРИМЕЧАНИЕ. Идентификатор таймера должен быть доступен в обратных вызовах handlerIn и handlerOut, поэтому я сделал его глобальной переменной вне вызова метода hover. Вы можете определить это внутри вызова hover и заставить его работать. Я не проверял это так или иначе.

...