Question

How do I animate text color with jQuery/jQuery UI. The text is currently #000. when an event is triggered I want the text color to go #F00 then fade back to #000 over 3 seconds.

I tried effect("highlight", {}, 3000) with highlight but it doesn’t re-trigger the effect until is completed and will then continue doing it for the amount of time it was triggered… not really useful for this.

Any ideas?

C

UPDATE:

this is what I have now:

$("input:text[name=size_w]").keyup(function () {
            var value = ($("input:text[name=size_w]").val() == "") ? "null" : $("input:text[name=size_w]").val();
            $("#width_emb").text(value).css({ color: "red" }).animate({ color: "black" }, 3000);
        }).keyup();

But it’s still not working the way I need. I can’t re-trigger the initial color change until the animation is finished. if the event is re-triggered before the 3 seconds is u I need to abandon the animation as start it again.

Answer 1

You need JqueryUI it adds support for colour animation

http://jqueryui.com/demos/animate/

From the JQueryUI site:

The jQuery UI effects core extends the animate function to be able to animate colors as well. It’s >heavily used by the class transition feature and it’s able to color animate the following properties:

• backgroundColor
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• color
• outlineColor

In response to the updated question if you are halfway through an animation and you want it to stop or restart if you click again you can call .stop()
http://api.jquery.com/stop/
You can also use this to clear any queued animations.