Keeps fading in after, mouseover

Question

I am trying to fade in a

on mouseover and fade out on mouseout:

  $("p.follow").mouseover(function(){
        $(this).fadeTo("slow", 1.00);
})
$("p.follow").mouseout(function(){
        $(this).fadeTo("fast", 0.50);
})

If you go to ryancoughlin.com and on the right side, if you go over it you will see what I mean, it is almost as if it is stuck and keeps fading in.

Any ideas?

Answer 1

Try this:

$("p.follow").hover(function()
   {
      $(this).stop().fadeTo("slow", 1.00);
   },
   function()
   {
      $(this).stop().fadeTo("fast", 0.50);
   });

Two key differences: I use the jQuery hover event to associate mouseover and mouseout event handlers such that child elements won't result in confusing behavior, and i use the stop() function to prevent animations from overlapping and canceling each other out.

Answer 2

It may be worth looking at the hoverintent plugin, this basically uses a little setTimeout so that it wont activate if a user quickly moves the mouse across the element instead. Easy to code yourself but worth a look.

Answer 3

A mouseover-event is fired every time your mouse moves over the element. Since effects are executed sequentially and a mouseover is fired pretty frequently, you get a lot of effects that have to be executed "slow".

What you probably want is the hover-event, which is only executed once for each entry.