CSS jQuery hover fadeIn problems – Please help!!

[PrimalScientist]

Hello all,

I am trying to get my hover to fade in slowly using jQuery but for some reason i am doing something wrong!!

Here is my nav list:

Home


Skills


Employment


Education


References


Contact

Here is my jQuery:

	$('.myButton').hover(function(){

$('.myButton:hover').delay(1000).fadeIn(1000);

});

Here is my CSS:

.myButton {

width:100px;

padding:5px;

color:#fff;

border: 2px solid #7D8384;

text-decoration:none;

text-align: center;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 12px;

}



.myButton:hover {

width:100px;

padding:5px;

border: 2px solid #32B5D0;

color: #32B5D0;

text-decoration:none;

text-align: center;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 12px;

}

Can someone help please?

Thanks Daz.

[Mottie]

Just from the quick look, the “.myButton” class is already visible (opacity is 100%) and won’t fadeIn.

Also, using “.myButton:hover'” as a jQuery selector won’t work. There is no “:hover” selector.

Lastly, the “delay(1000)” won’t work because it needs to have qued animation before a delay will work.

If you tell us what it is you are trying to do, we might be able to help you better.

[PrimalScientist]

Thanks Mottie.

What I am trying to do is when the user hovers over the buttons in my nav pane, I want my button to change from grey to blue. But instead of changing colour immediately, I wanted it to fade in if you know what I mean?

Cheers,

Daz.

[PrimalScientist]

Thanks for that by the way. Getting to know jQuery slowly…

[PrimalScientist]

Didnt need jQuery…!!

-webkit-transition: opacity 1s linear;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;

[thomas]

Why didn’t you use “opacity 1s linear” for all of the vendor-prefixed properties? And don’t forget to include “transition” by itself so that it will continue to work when it’s widely supported.

You might still want to consider a jQuery fallback for IE and users on older versions of Firefox, Chrome, and Safari.

[PrimalScientist]

Okay, will do.
Its the first time I have used this property, so still learning really…

That was the problem, I didn’t know how to do it in jQuery.
Was asking for help. Good fun in learning though, enjoyable solving the problems, or getting help solving them anyway.

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

[PrimalScientist]

Chase,
Thanks for your reply. Sorry I didnt reply sooner!! I didnt check back!!

thanks.

Daz.

[Author]

Posts