使用单击功能停止悬停功能

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