O'Reilly

jQuery Random Link Color Animations

By on  

We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.

The jQuery JavaScript

$(document).ready(function() {
	var randomLinks = $('a.random-color');
	var original = randomLinks.css('color');
	randomLinks.hover(function() { //mouseover
		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
		$(this).animate({
			'color': col,
			'paddingLeft': '20px'
		},1000);
	},function() { //mouseout
		$(this).animate({
			'color': original,
			'paddingLeft': '0'
		},500);
	});
});

For the color animation portion, you'll need an extra Color Animations jQuery plugin. The padding nudge is another neat effect. This effect isn't for everyone, but it can add another subtle effect to your jQuery-enabled website.

Track.js Error Reporting

Recent Features

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • spellcheck Attribute

    Many useful attributes have been provided to web developers recently:  download, placeholder, autofocus, and more.  One helpful older attribute is the spellcheck attribute which allows developers to  control an elements ability to be spell checked or subject to grammar checks.  Simple enough, right?...

  • External Site Link Favorite Icons Using MooTools and CSS

    I recently came upon an interesting jQuery article about how you can retrieve all external links within a page, build the address of the site's favorite icon, and place the favorite icon along side the link. I've chosen a different approach which...

Discussion

  1. Nicely done David! But I think you should do 256 since – i believe – (Math.floor(Math.random() * 255)) will never return 255, just 0- 254.

  2. Nice idea David!

    The animation is a little slow though…

  3. Cool idea. I think that there should be some constraints on the colours though as sometimes the link turned off-white.

    var col = ‘rgb(‘ + (Math.floor(Math.random() * 51)) + ‘,’ + (Math.floor(Math.random() * 51)) + ‘,’ + (Math.floor(Math.random() * 153)) + 51′)';

    for example will always (I think) be a colour between #000033 and #3333CC

  4. @Benjamin Sterling: Good point. Updated.

    @James: Speed can be adjusted, so no worries there.

    @Clinton Montague: This is a great consideration and one I looked at when developing. I decided to leave it out because it’s a “per site” issue.

  5. Hi David.

    Its is simply superb.

  6. John Smith

    Great effect David! Thanks for sharing it with us.

    Does anyone know of a way to make this compatible with IE 7 by chance?

  7. @John Smith: Works for me!

  8. John Smith

    Cheers David – figured out my issue – I just had a conflicting css definition that I somehow glazed over.

  9. tuft

    Hi, just suggestion: call stop() on element before starting new animation:

     $(this).stop().animate({ ... });
    

    It will eliminate dancing menu item after multiple mouseover/mouseout

  10. Hi David, sorry this is such a backward question but can you tell me how I can use this code with my html. I don’t mean within my document, but referencing, say, a js file on my site to get this effect to take place?

    Thanks a lot.

  11. theorie

    hello,

    i’m wondering how it would be possible to limit the number of colors to a defined list. if i only want to have 7 set colors, how would i go about defining those 7 colors?

    thanks in advance!

  12. Well, this is just great!

    I’m trying to figure out how to modify this so that every link on a page, when loaded, has a random background color. With a little padding on each link, it will look kind of lego-ish or block pixel-y or something, which would be rad. Any ideas?

  13. Hardy

    Hi there,
    unfortunately it does not work in combination with a slide out panel (based on jQ) in FF and Chrome. Does anybody know about that and is there anything I can do to make it work?????
    Thanks in advance.

    Hardy
    Berlin, Germany

  14. Victor Stroe

    nice code man! thx for sharing

    @theorie

    you can use this:

    colors =
    [
    “#37C78F”,
    “#C9DE55″,
    “#FF4D38″,
    “#CC2249″,
    “#380C2A”
    ]
    var col = colors[Math.floor(Math.random()*colors.length)];

  15. naty

    hi, i want to create a random spinning roulette or maybe something like a slot machine code, sp that the user will press “go” and the different options (which i’ll enter) will begin to spin and then stop on a random one. any help ?

  16. Nice Work. But If we hover it fast over all the links. It is not working in the way that it pretend to be.

  17. Thank you.. Great stuff..

  18. Nice Algorithm! I will use it on our page.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...

  • OSCON Portland:  Conference Giveaway and Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...