jquery - Display another Div when hover another Div's child -

i want display div when hover div's child

here html code

<div id='container'>     <div>         <ul>             <li class='hover'>a</li>             <li>b</li>             <li>c</li>         </ul>     </div>     <div class='hover' id='display'>some text</div> </div> 

and jquery code

$(".hover").hover(function () {     $('#display').show(); }, function () {     $('#display').hide(); }); 

it works fine if add time javascript code animation purpose, like

show(200); hide(200); 

it looks funny. if there tell me on how fix appreciate.

it's because new animation triggered before last have ended.

the simpliest fix add stop();

 $(".hover").hover(function () {      $('#display').stop();      $('#display').show(200);     }, function () {       $('#display').stop();      $('#display').hide(100);  }); 

http://jsfiddle.net/igos/ck9hv/