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 ?

Answer 1

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

.stop( [clearQueue] [, jumpToEnd] )

Answer 2

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

FIDDLE