Playing with jQuery Color Plugin and Color Animation

jQuery is an easy and useful JavaScript library. If you are someone with basic knowledge of JavaScript you can easily insert jQuery plugins and effects. You do not need to be hardcore coder or developer for that. In this post you will see how to create some cool menus with jQuery and  jQuery Color Plugin.

View Demo
Things you need:

1. Jquery 1.3.2

2. Jquery Color Plugin

First we have is Basic HTML mark up. I am assigning class to each so I can control different color animation

[sourcecode language="html"]

<div id="menu" class="first">
<ul>
<li> <a href="#"> Home</a></li>
<li> <a href="#"> About</a></li>
<li> <a href="#"> Portfolio</a></li>
<li> <a href="#"> Contact</a></li>

[/sourcecode]

Do not forget to link  the jQuery and color plugin in the header. Now we are going to add the color animation.

[sourcecode language="jscript"]
$(".first a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
[/sourcecode]

That’s it. A little bit of code does the trick.

Code Explanation

We set the the background color using CSS #303030 (Dark Grey). When the page loads first we see the background color. Then using this code $(this).animate({ backgroundColor: “#00aadd” }, 600); we set the background color  to #00aadd on mouseover .

Normal Hover
Again, $(this).animate({ backgroundColor: “#303030″ }, 400); brings back background to original color when you mouseout. You can pretty play with the speed settings.

The second menu is basically same. Instead of using “backgoundColor” we use the “color syntax” to change the font color.

I got the idea for the third and fourth menu idea from David Walsh’s Link color animation post. I modified the code to use it here.

The third menu first it has a variable where the original background color is is stored.  Then the second variable has the math function for the different colors when you mouseover. When you mouseout  ‘backgroundColor’: original, set the background color to default CSS color. This is nice effect to add interactivity for the reader.

Differnt Link Only

The fourth menus is just experimental. When you mouseout the background color does not sets back to original color instead it stays that color.

Differnt Hover color

Obviously, there are more modification you can  add and play around with settings. Download the menus and use it as you please. If you have suggestions to improve it please feel free to comment
Tested in : IE 7 IE8 (using IE Tester) Firefox and Safari.
Here is the full jQuery :

[sourcecode language="jscript"]
/ Background color animation
$(document).ready(function(){
$(".first a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
// font color animation
$(".second a").hover(function() {
$(this).animate({ color: "#00eeff" }, 400);
},function() {
$(this).animate({ color: "#FFFFFF" }, 500);
});
// Fun with Color. Differnt font color each time hover
// Orginal code can be found http://davidwalsh.name/jquery-random-color-animate
original = $(‘.third a’).css(‘background-color’);
$(‘.third a’).hover(function() { //mouseover
var col = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘)’;
$(this).animate({‘backgroundColor’: col}, 1000);
},function() { //mouseout
$(this).animate({‘backgroundColor’: original},500);
});
// Hover Color Does not change back to original
$(‘.fourth a’).hover(function() { //mouseover
var col = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘)’;
$(this).animate({‘backgroundColor’: col},500);
},function() { //mouseout
$(this).animate({‘backgroundColor’: col},500);
});
});
[/sourcecode]

Updat: A stop been added to prevent animation building queue buildup.Thanks Andy for catching it Read more?


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Erin

    I’m wondering whether it’s possible to make the background colour of the first example to be opaque, while keeping the text full colour?

  • http://www.maofree-developer.com maofree

    Hi Kawsar Ali
    There is a big bug in this script, with IE8 and IE7 (no problems with IE9).
    You can see it in your demo page, moving your mouse fast over the menus, from right to left and in the opposite way. The jquery goes in tilt and the hover solution finishes to work

    bye

  • http://bluepixelonline.com joey

    Love this plugin! I’m working on converting a flash site to html and without something like, it wouldn’t be possible.

    I have a text navigation but each link is a different color. When you rollover each link, they all should turn black, but when you mouse-out they should turn back to the color specified in the css. Is there any way have them roll-out to their original colors defined in the css?

  • http://www.uitmuntend-webdesign.nl J. Hendrix

    Very cool! I will probably use this in one of my future webdesign projects. Thanks!

  • Hardy

    Hi
    I like this very, very much and it works just fine until you are using it in combination with a slide out panel that also is based on jQ. The combination works fine in IE8 but absolutely not in Chrome or Firefox. FF doesn´t work at all (the slide out panel stucks right at the beginning) and the behavior in Chrome is strange. First the panel slides out 100% but once you slide it out more often it reduces its height until it stucks. As soon as you deactivate the color change feature the slide out panel works again perfect in all browser.
    Do you have any idea what I can change to make it also work in FF and Chrome in combination with my slide out panel?
    Thanks for any help.
    Hardy
    Berlin, Germany

  • Gavin

    Thanks for the tutorial,

    I am trying to animate some text (color of the text) so that it fades through a few colors, like from red, to orange, to green and then blue.

    I want the animation to ‘just play’.

    Any ideas how I can do this with this technique?

  • Justin

    I’m trying to make this work on a transparent background, then on hover fade to a color. This seems to break the code?

  • baba

    Hi guys,
    I wanted to know what function i have to use to keep one button in position active (static without fade effect)when i navigate from page to page. Thanks for your answers and sorry for my english.

    • http://desizntech.info Kawsar Ali

      Just have the button a different class. Create one class that will have the fade and just add the class to which ever menu/link/button you want to fade.

  • Lee Wilson

    Do you know if there might be any conflict with the coda slider script:

    http://jqueryfordesigners.com/demo/coda-slider.html

    js:

    http://jqueryfordesigners.com/demo/coda-slider.js

    For some reason, when I have the coda slider js on a page, the color fading doesn’t work, if I remove it it does.

    Any ideas?

    Thanks

  • Luis Ruiz

    Hi I found an issue with IE and whitesmoke color. It works fine on Firefox.
    I solved it changing whitesmoke color to #F5F5F5 but I think you’d like to know it.

    Cool plug in!

  • http://jhames.com Jhames

    Thank you for this demo, Kawsar! But I want to take this demo one step further… I want to create a transparent PNG file contained in a DIV that is constantly changing its background color. Is this possible without causing users’ browsers to crash?

    (I like using jQuery in place of Flash so I don’t have to worry about excessive sniffers or mobile devices unable to view content.)

    • Kawsar Ali

      If you can provide a link or code that would be great. I think it is possible

  • k

    I have problems with jQuery 1.3.2 ( but not with jQuery 1.2.6 ) when I try to do this.

    var startColor = jQuery(“#cart tr .quantity input[name*="+ref+"]“).parent().parent().hasClass(“odd”) ? “#FFF8C6″ : “#FFF”;
    jQuery(“#cart tr .quantity input[name*="+ref+"]“).parent().parent().find(“td”).animate({ backgroundColor: “#”+”FFFF66″ }, 100).animate({ backgroundColor: startColor }, 2000);

    With a jQuery 1.2 i don’t have any problem, but my problem is that i need 1.3 to some things that my page use.

    Please i need help. Thx.

    • Kawsar Ali

      latest version should work fine. whats happens in your animation?

  • http://xandercs.com/ Alexander F

    I’ll be using this JQuery plugin really soon…

  • Kawsar Ali

    @andy matthews: Thanks for the feedback will try to update it asap

  • http://andymatthews.net/ andy matthews

    Make sure you put a .stop method immediately before your animate call to prevent queuing of animations. You can see this in action by moving your cursor back and forth over one of the buttons rapidly for a few seconds, then moving it away. You’ll notice the animation continues to occur. Adding the stop method removes all queued animations for that object before firing another one.

    Also, the colors on your blog make it really hard to read the text…just something to consider.