//animate with no stop() $(".nostop li").hover( function () { $(this).animate({width:"200px"},500); }, function () { $(this).animate({width:"80px"},500); } ); //animate with stop() $(".stop li").hover( function () { $(this).stop().animate({width:"200px"},500); }, function () { $(this).stop().animate({width:"80px"},500); } );
<div>기존 이벤트에 대한 처리가 안되어 있는 경우</div> <ul class="nostop"> <li></li> <li></li> <li></li> </ul> <div>기존 이벤트에 대한 처리가 되어 있는 경우</div> <ul class="stop"> <li></li> <li></li> <li></li> </ul> <div>각 항목에 마우스를 올려놓기만 했을 때는 차이가 드러나지 않는다.<br/><br/>마우스를 위아래로 여러차례 빠르게 움직여보면 기존 애니메이션 이벤트에 대한 처리를 해준 것과 해주지 않은 차이가 드러난다.</div>
div { font: 12px black; margin: 40px 0 10px 0; } li{ width:80px; height:40px; background:#444; margin-bottom:10px; } .stop li{ background:#000; }