.animate()구문 활용

       <div></div>

        div {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            margin: 100px, auto;
        }

       $(document).ready(function(){
           $("div").on("mouseenter", function(){
               $("div").stop().animate(
                 {"width":"500px","height":"500px"},800); 
             // 800= 0.8s
             // .stop() 구문으로 중첩 현상 없애기
           })
           $("div").on("mouseleave", function(){
               $("div").stop().animate(
                 {"width":"300px","height":"300px"},800);
           });
       });