Forums

Niall

Hiya.

I've got basically no experience with JQuery and I'm wondering how I could get, on hover, the colour of a link to fade to another.
Any recommended articles or code samples would be great, thanks all :3

cybershot

http://davidwalsh.name/fading-links-jqu ... adinglinks

Niall

Thanks. After a heck of a lot of fiddling I got it to work somewhat, but I'm wondering how to apply the fade class to all links in an unordered list.

<div id=\"sidebar\">
		<ul class=\"fade\">
			<li><a href=\"#\">home</a></li>
			<li><a href=\"#\">blog</a></li>
			<li><a href=\"#\">work</a></li>
			<li><a href=\"#\">contact</a></li>
		</ul>
	</div>

This only makes the default bullets constantly fade, I'm not sure what to do :0

AshtonSanders

The cool thing (for me at least) about Jquery is how similar to CSS it is (esp the use of selectors).

Here's the example code from the above link:

$(document).ready(function() {
$('.fade').dwFadingLinks({
 color: '#008000',
 duration: 700
 });
});

This part: $('.fade'). selects all elemets with the class="fade" using the basic CSS class selector.

If you change this to: $('.fade a'). it will select all <a> inside an element #listID (again, just like CSS). Here's the code:

$(document).ready(function() {
$('.fade a').dwFadingLinks({
 color: '#008000',
 duration: 700
 });
});

I haven't tested this, but I'm 90% sure it works. ;) I'm still on the Jquery learning curve.

Hope that helps.

treehouse : what would you like to learn today?

Forums

JQuery link hovering fading colour change