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:
<div id="sidebar"> <nav role="navigation"> <ul> <li><a href="#index.html" class="myButton" title="About Me">Home</a></li> <li><a href="skills.html" class="myButton" title="View my skills and experience">Skills</a></li> <li><a href="employment.html" class="myButton" title="See what top companies I have worked for">Employment</a></li> <li><a href="education.html" class="myButton" title="View where I studied and gained my foundtion skills">Education</a></li> <li><a href="references.html" class="myButton" title="Need references? No problem.">References</a></li> <li><a href="#contactpage" class="myButton" title="Feel free to Contact Me.">Contact</a></li> <li><div class="divider"></div></li> </ul> </nav>
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?
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.
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.
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.
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).
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:Here is my jQuery:Here is my CSS:Can someone help please?
Thanks Daz.
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.
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.
-webkit-transition: opacity 1s linear;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
You might still want to consider a jQuery fallback for IE and users on older versions of Firefox, Chrome, and Safari.
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.
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).
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.
Thanks for your reply. Sorry I didnt reply sooner!! I didnt check back!!
thanks.
Daz.