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?
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.
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.
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.