jquery - クリック機能でホバー機能を止める

Question

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

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

上記のコード。クリックするとホバー機能を止めようとしたのですが、うまくいきません。それともまったく不可能ですか？

Answer 1

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

.stop( [クリアキュー] [, 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);
    }
});

フィドル