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
jquery fade


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 to share


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 to share


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 to share







All Articles
Loading...
X
Show
Funny
Dev
Pics