Use jQuery to change text color?

JavaScript
1

I am trying to get a header, to fade between colors, from red - orange - green - blue for example.

Someone told me that jquery might be able to handle this as I dont want to use flash.

Can anyone point me in the right direction to get this to work?

Thanks

2

Ah I see, thanks for that. So I with that I can only go from current state to a changed state, can I add on an animate from the changed state to the next color?

3

For that, you should take a look at 2 things:
jQuery.animate() Documentation - http://api.jquery.com/animate/
Demo page for the color plugin: http://dev.jquery.com/~john/ticket/fx-rewrite2/

After you have a basic understanding of the use of jQuery.animate() - for which no explaination I could personally provide will help you more than the official docs- take a look at the source code of the demo. It’s all fairly easy to work with. Once you include jquery and the color plugin in your page, it’s as easy as using the animate function the way it was intended - except now it will work with color which is something it couldn’t do before for a reason I’ve never been too clear on.

4

For that, you add another animate. One of the great things about jquery is its ability to chain. You can do things like this:
$(“#textblockid”)
.animate({color: “red”}, 1000)
.animate({color: “green”}, 1000)
.animate({color: “blue”}, 1000);

5

Yeah, I read that doc, but nothing is mentioned about animating colors.

I am reading through the source and trying to pick out the bits I need.

6

Right, the basic use for jQuery.animate is: $(“css.selector”).animate({propertyToChange: “value to set”, someOtherProperty: “another value to set”}, <time in milliseconds to do the animation>);

So you’re looking for $(“#textblockid”).animate({color: “red”}, 1000); this changes the color property of an element with the id of textblockid from its current color to red over the course of 1 second.

7

Thanks for the link, I dont seem to see any information on how to implement it?

8

This may be what you’re looking for:
http://plugins.jquery.com/project/color

You will need jquery to use it - as it is a plugin - but jquery is well worth learning to use.