Edit in JSFiddle

//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 {
    font: 12px black;
    margin: 40px 0 10px 0;
}

li{
    width:80px;
    height:40px;
    background:#444;
    margin-bottom:10px;
}

.stop li{
    background:#000;
}

<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>