mouseover mouseout keeps executing

I have a div that is display:none and I want to fade it in when the mouse goes over another div and fade it out when the mouse goes off that div. The problem is once I go over the div keeps fading in and out for about 10 times regardless of whether the mouse stays on or off. Anyone have any ideas?

$(document).ready(function() {

        $开发者_如何学Python(".pic").mouseout(function(){
 $(this).children('#summary').fadeOut(2000);
    }).mouseover(function(){
   $(this).children('#summary').fadeIn(2000);
    });

});

Call .stop() before calling the animation in each handler.

$(function(){
  $('.pic').hover(function(){
    $(this).children('#summary')
      .stop(true)
      .fadeOut(2000);
  }),
  function(){
    $(this).children('#summary')
      .stop(true)
      .fadeIn(2000);
  });
})

edit: oops, had to fix my copy/paste

Use a plugin like hoverIntent to throttle the rate of in/out messages. Usually helps.