I want to change the background of an inputbox from white to another colour and then back to white again in a slow fading way. i have tried the animate it simply doesn't work. there is no error.

<script type="text/javascript" src="/jsp/ui/jquery-ui/js/jquery-1.8.3.min.js"></script>
...
$(document.getElementById(id)).animate({ backgroundColor: "#4E1402" }, 500);

update

This works fine

$(document.getElementById(id)).animate({ width: "400px" }, 500);

I want to change the background of an inputbox from white to another colour and then back to white again in a slow fading way. i have tried the animate it simply doesn't work. there is no error.

<script type="text/javascript" src="/jsp/ui/jquery-ui/js/jquery-1.8.3.min.js"></script>
...
$(document.getElementById(id)).animate({ backgroundColor: "#4E1402" }, 500);

update

This works fine

$(document.getElementById(id)).animate({ width: "400px" }, 500);

• javascript
• jquery

• 2 Try $('#' + id).animate({ backgroundColor: "#4E1402" }, 500); instead. – Bucket Commented May 29, 2013 at 13:09

3 Answers 3

jQuery cannot animate color. Use this plugin instead.

http://www.bitstorm/jquery/color-animation/

( just a 4kb addition )

Or the jquery UI animate :

http://jqueryui./animate/ ( as mentioned by @Adam below )

You need this plugin to animate the colors with jQuery : http://archive.plugins.jquery./project/color

Have you included jquery-ui library as well?

If I remember good, current element that you are reffering to, must have some background color set at start.