How to instantly invoke a handlerOut for the hover() function?

Question

I'm new to Javascript & jQuery in general. I have the following simple jQuery code snippet that changes/animates the width of a circle :

<script type="text/javascript">
    $("#circle").hover(function() {
        $(this).animate({width: "100%"}, 3000)
    },function() {
        $(this).animate({width: "100px"}, 3000)
    });
</script>

However, what I really want is to interrupt the handlerIn function(first one inside hover) and instantly invoke the handlerOut as soon as my mouse leaves the circle. Meaning, when I hover my mouse over the circle, the circle should animate(increase) the width, but as soon as my mouse leaves, it should animate back(decrease) to original width(as opposed to reaching 100% width and then returning back). Hope this makes sense. Thanks

Answer 1

See if this works.

http://api.jquery.com/stop/

<script type="text/javascript">
    $("#circle").hover(function() {
        $(this).animate({width: "100%"}, 3000)
    },function() {
        $(this).stop();
        $(this).animate({width: "100px"}, 3000)
    });
</script>