Keeps fading after

I'm trying to fade into

on mouse over and fade out on mouse path:

  $("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 to it, you will see what I mean, it is almost like it is stuck and keeps disappearing.

Any ideas?

+1


source to share


3 answers


Try the following:

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

      



Two key differences: I use the jQuery event hover

to bind the mouseover and mouseout event handlers so that child elements do not result in confusing behavior, and I use a function stop()

to prevent duplicate and canceled animations.

+4


source


It might be worth looking at the hoverintent plugin , this basically uses a bit of setTimeout so that it won't get triggered if the user quickly moves the mouse over the element instead. Easy to code yourself, but worth a look.



+1


source


The mouseover event is triggered every time your mouse moves over an element. Since the effects are executed sequentially and the mouse hovers are frequent, you end up with a lot of effects that must be "slow".

What you probably want is a hover event that only fires once per post.

0


source







All Articles