CODEWITHSUNDEEP
jquerycss
Scarface
Scarface

Reputation: 3913

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() {

        $(".pic").mouseout(function(){
 $(this).children('#summary').fadeOut(2000);
    }).mouseover(function(){
   $(this).children('#summary').fadeIn(2000);
    });

});

Upvotes: 1

Views: 716

Answers (2)

kinakuta
kinakuta

Reputation: 9037

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

Upvotes: 4

Bryan A
Bryan A

Reputation: 3634

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

Upvotes: 0

Related Questions