jquery--resolving a bug that causes the box to move without moving the mouse cursor

When you use MouseOver (), mouseout (), this box will continue to move after the mouse has moved in and out after a quick multiple-shift

The code is as follows:

<!    DOCTYPE html>        $(function () {            $('. Box '). MouseOver (function () {                    $( This). Animate ({margintop:100});            }); $('. Box '). Mouseout (function () {                $( This). Animate ({margintop:50}); })        })    </script> <style type= "Text/css" >. box{width:300px;            height:300px; Background-Color:hotpink;        margin:50px Auto; }    </style>
There is a bug like this:
Workaround: Add Stop () before MouseOver () and Mouseout ().
    <script type= "Text/javascript" >        $ (function  () {            $ ('. Box '). MouseOver (  function  () {                    $ (this). Stop (). Animate ({margintop:100});                });            $ ('. Box '). Mouseout (function  () {                $ (this). Stop (). Animate ({margintop : ())})     </script>
jquery--resolving a bug that causes the box to move without moving the mouse cursor