jQuery function not happening on hover mouseleave

Question

I'm trying to make a small animation for a website I'm working on but the way I have built it, when I speed my mouse over the container div, the animation still happens. How do I get this to recognize that the mouse isn't actually hovering?

The HTML code is:

<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>

and this is the jQuery I'm using:

$("#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 );   
    }
);

I've read about the clearTimeout function but I'm not sure if that applies to this as my solution.

Thanks so much for any help or clarification!

I suggest you practice proper spacing and indentation of your code to aid in readability and troubleshooting. I edited your post to show what I'm talking about. — Sparky, Mar 13 '12 at 17:18

TLS · Accepted Answer · 2012-03-30T01:33:44.767

0

I spent a little time just rearranging the layout of the JavaScript to help see what was really happening, and I think I see what you might be missing. The setTimeout method returns a value to represent the timer that is being set. If you don't capture this value, you won't be able to cancel the timer.

Instead of calling setTimeout( function(pee)..., change it to capture the return value, and then use that value in the clearTimeout call.

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);
    }
);

NOTE: The timer Id needs to be available in both the handlerIn and handlerOut callbacks, so I made it a global variable outside the hover method call. You could possibly define that inside the hover call and have it still work. I have not tested it either way.

edited Mar 30 '12 at 01:33

answered Mar 13 '12 at 17:28

TLS

3,090
2
25
33

awesome! This worked perfectly. The only thing is now, the "TM" div is staying after roll out. I tried creating another var and a clearTimeout for that as well but it didn't work. Any ideas? – brock2621 Mar 14 '12 at 14:01
@brock2621 - not sure on that one. In the code update I provided, the TM animation is in a new timeout function. It looks like it should animate after just a short delay. – TLS Mar 14 '12 at 14:13
I'm curious to know why this has been downvoted. Did I miss something or not answer the question? – TLS Mar 14 '12 at 20:35
w3schools is not a respected resource around here. Sometimes answers which reference it are down-voted. – Sparky Mar 29 '12 at 21:46
@Sparky672 - well, that's good to know. I didn't know I was supposed to avoid it as a resource. It's been pretty good with quick JavaScript syntax references. Can you recommend a better resource that has comprehensive syntax reference? – TLS Mar 30 '12 at 01:23
@Sparky672 - I answered my own question with a quick search: [Best Reference Sites](http://stackoverflow.com/q/823718/475820). I've only relied on the reference section of w3schools, not the tutorials, which I agree are not the greatest. – TLS Mar 30 '12 at 01:30

jQuery function not happening on hover mouseleave

1 Answers1