How to instantly call an Out handler for the hover () function?

Question

I am new to Javascript and jQuery in general. I have the following simple jQuery code snippet that changes / enlivens 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, I really want to abort the handlerIn function (first inside inside the hover) and instantly call handlerOut as soon as my mouse leaves the circle. The point is, when I hover over a circle, the circle should animate (increase) the width, but as soon as my mouse leaves, it should plunge into the back (decrease) to the original width (as opposed to reaching 100% width and then going 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>

Answer 2

, css

#circle:hover { width:100% }
#circle { width: 100px; transition:3s; }