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 Download jQuery Color Menu
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
<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>
Do not forget to link the jQuery and color plugin in the header. Now we are going to add the color animation.
$(".first a").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});
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 .
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.
The fourth menus is just experimental. When you mouseout the background color does not sets back to original color instead it stays that 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 :
/ 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);
});
});
Updat: A stop been added to prevent animation building queue buildup.Thanks Andy for catching it Read more?
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?
Great tutorial. Thanks!
I’m trying to make this work on a transparent background, then on hover fade to a color. This seems to break the code?
Is there a way to combine class third and fourth?
I wish to generate a random color on ‘mouseover’ and go back to the original color on ‘mouseout’.
But on mouseclick I would like to keep the color generated.
I cant seem to get this working!
Thx in advance.
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.
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.
I had looked everywhere for this article – something that I would do exactly what it said, without all the fuss and hassle. I had already wasted hours of time and who knows how much time on other blogs, so I have to thank you for this article. Thanks!
thank you, nice plugin :)
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
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!
Sorry… mylast chance…
I might be the most clumsy trainee in the world, but I don’t understand why it does not work for my page… and I have spent two days on that.
Thanks ( I hope you can see now all code)
<!–
prueba
/ 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);
});
});
Home
About
Portfolio
Contact
–>
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.)
If you can provide a link or code that would be great. I think it is possible
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.
latest version should work fine. whats happens in your animation?
I’ll be using this JQuery plugin really soon…
Ditto. I just used it on two different projects and both clients really like it.
@andy matthews: Thanks for the feedback will try to update it asap
I just started playing with Jquiry when a client asked me to do a slideshow on his site. I’ll have to try color swapping sometime too.
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.