Stopping hover function with a click function

Question

        $("#theDiv").hover(function(){
            $(this).animate( {top: "300px", left: "400px", width: "50px" , height: "50px" },"Fast")
        }); 

        $("#theDiv").click(function(){
            $(this).stop();
        });

Code as above. I tried to stop the hover function when I click it, but it doesn't work. Or is it not possible at all ?

Alex · Accepted Answer · 2012-07-09 03:01:15Z

1

$("#theDiv").mouseenter(function(){
    $(this).animate( {
        top: "300px",
        left: "400px",
        width: "50px" ,
        height: "50px"
    } , "fast");
}).click(function(){
    $(this).stop(true, false);
});

.stop( [clearQueue] [, jumpToEnd] )

edited Jul 9, 2012 at 3:01

answered Jul 9, 2012 at 2:54

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ohgodwhy Over a year ago

This won't work, the trigger will occur the second you move the mouse after clicking.

adeneo · Accepted Answer · 2012-07-09 02:54:09Z

0

$("#theDiv").on({
    mouseenter: function() {
        $(this).animate( {top: "300px", left: "400px", width: "50px" , height: "50px" },"Fast");
    },
    click: function() {
        $(this).off('mouseenter').stop(true);
    }
});

FIDDLE

answered Jul 9, 2012 at 2:54

adeneo

319k29 gold badges410 silver badges392 bronze badges

4 Comments

Ohgodwhy Over a year ago

I would suggest a variation of this answer, with a setTimeout() function to re-enable the mouseenter, allowing the user enough time to move their mouse away from the element and avoid re-triggering the hover.

adeneo Over a year ago

The question is "how to stop the hover function", are you sure the OP would like it to start again after a set time ?

Ohgodwhy Over a year ago

the only two things I'm sure of in life are death and taxes. I was just thinking that it would be nice to be able to renable the animation because an element sitting in the middle of the viewport might become a bit of an intrusion. I meant nothing more than that, sorry.

adeneo Over a year ago

Maybe an element in the middle of the viewport is exactly what the OP would like :-) -- Seriously though, it does'nt really say anything about it in the question, but if that is the wanted effect, it's easy to add.

Collectives™ on Stack Overflow

Stopping hover function with a click function

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related