Re: CSS jQuery hover fadeIn problems – Please help!!

[ChaseMoskal]

jQuery Saves the Day!

This solution requires jQuery, and if you want to animate colors (as in this example), you also need jQuery UI.
I’m sure there are libraries lighter weight than jQuery+UI out there that can get the job done, but I’ve been doing it this way because I use jQuery+UI in all of my projects anyways. And yes, you could do this all with vanilla javascript, but that would… suck.

>> jQuery Download Page
>> jQuery UI Download Page

If you’d rather use JavaScript over CSS3 animations (a good choice for considering people without CSS3-enabled browsers), jQuery’s mouseenter and mouseleave events are the way to go for sure.

Forget entirely about the CSS :hover and :active pseudo-classes, because this is all JavaScript. And jQuery. And jQuery UI if you’re animating the colors (if you don’t want UI, or colors, you can animate other things, like the opacity for example, using regular ol’ jQuery).

var $links = $('#sidebar>nav>ul>li>a'); // Selecting your links.



$links.mouseenter(function(event){ // When the mouse enters a link...

var $link=$(event.currentTarget);

$link.stop(true,true).animate({'color':'blue'},150); // animate to hover state

});



$links.mouseleave(function(event){ // When the mouse leaves a link...

var $link=$(event.currentTarget);

$link.animate({'color':'grey'},150); // animate to normal state

});

I apologize if my example is not bang-on, as it was improvised from my memory.

Note: If you want to animate a button/link/anything to move or slide when you hover, animate it’s “padding-left” css property rather than “left”, for example, because otherwise the element could slip out from under your cursor, causing it to animate back, which then places it under your mouse again, and so on and so forth.

Also, including stop(true,true) before the mouseenter animation is important, otherwise if you go crazy with the mouse over your buttons, several mouseenter/mouseleave animations will queue up, causing your buttons to pulse weirdly and all kinds of ghastly shenanigans.

In the past, I learned the hard way that jQuery’s mouseenter/mouseleave is a blessing, because there is a major issue preventing mouseover/mouseout from being satisfactory for many cases (it had to do with the events triggering multiple times when the element in question had any sub-elements for the mouse to also roll-over — jQuery’s mouseenter/mouseleave alleviates these issues).

Good luck!
//Chase.