文本框背景色慢慢淡出

有一个文本框，一个提交按钮。单击按钮，文本框背景色变为红色，之后红色慢慢的淡出，文本框背景色又变为初始的颜色.
这个功能怎么实现？请大侠帮忙！
我的代码：$("#addacount_form div[id=create_account_operation] input[id=save_account]").click(function(){
        var string=$("#addacount_form table[id=account_info_table] input[id=accountname]").val();
        if($.trim(string)==""){
            $("#addacount_form table[id=account_info_table] input[id=accountname]").addClass("backgroundcolor");
            $("#addacount_form table[id=account_info_table] input[id=accountname]").fadeOut(1000, function(){
                $("#addacount_form table[id=account_info_table] input[id=accountname]").removeClass("backgroundcolor");
            });
        }
    });

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<input id="effect"/ >
<input type="button"  id="button" />
    $(function()
    {
        $("#button").toggle(
function()
{
    $("#effect").animate({ backgroundColor: '#aa0000', color: '#fff', width: 500 }, 1000);
},
function()
{
    $("#effect").animate({ backgroundColor: '#fff', color: '#000', width: 240 }, 1000);
}
);
    });
<script language="javascript">
        $(function()
        {
            $("#button").click(function()
            {
                $("#effect").addClass("class1", 500, function()
                {
                    $("#effect").removeClass("class1", 500);
                });
            });
        });    </script>    <style type="text/css">
        .class1
        {
            background-color: #FF3300;
        }
    </style>
</head>
<body>
    <input id="effect" />
    <input type="button" id="button" value="点击改变样式" />
</body>
以上的都可以，但是背景不是都可以，楼主自己可以试试，建议动画用animate
   这个显然不行的，animate里面的样式都是css那里用到脚本属性了backgroundColor，还有颜色是在animate 没有动画效果的。我纳闷4楼，addClass有那么多参数吗？？还能设置时间的？？我自己测试查了很多资料，Jquery要设置颜色渐变必须饮用插件。。
<textarea id="test" cols="30" rows="3"></textarea>
<input type="button" id="btn" value="提交" />
<div id="test1" style="width:200px; height:200px; border:1px solid red; "></div>
$("#btn").click(function(){
     $("#test").animate({"backgroundColor":'#333333',color:'#999', width:500}, 1000);
$("#test1").animate({"backgroundColor":'#333333',color:'#999', width:500}, 1000);
});证明此函数不支持背景变色
把背景和边框的样式分开写
.class1{背景样式}
.class2{边框样式}
add和remove的时候只操作class1
代码都经过测试（FF，IE8--没在IE6下运行，没装！），没有问题。
addClass确实有好多参数，你可以去查查资料，jq的demos里有
那楼主在加上一个class.test{
   border:5px solid red;
}就可以了
用setTimeOut改变颜色值吧，setTimeOut是实现动画的“本”啊
  这有个页面背景颜色的    <body  class="body"style="filter:progid:DXImageTransform.Microsoft.Gradient(
startColorStr='deepskyblue', endColorStr='#FFFFFF', gradientType='0')">
jQuery的animate可以实现，filter的话应该有兼容问题吧
$("#文本框ID").css('background-color','red');
setTimeout(function(){
$("#文本框ID").animate({background-color:#fff },1000)
},1000);
随便写了段程序，楼主可以参考着改改<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer1,timer2;
var gColor=0;
var bColor=0;
var newColor;
var objID;
var obj;
function clickEvent(objID)
{
   this.objID = objID;
   changeColor();
   timer1=setTimeout("fadeOutColor()",1000);
}
function changeColor()
{
   obj = document.getElementById(objID);
   if (obj.value == "")
   {
      obj.style.background = "#ff0000";
   }
}
function fadeOutColor()
{
   obj = document.getElementById(objID);
   clearTimeout(timer1);
   gColor+=20;
   bColor+=20;
   if(gColor>255)
   {
     gColor =255;
   }
   if(bColor>255)
   {
     bColor =255;
clearTimeout(timer2);
   }
   newColor = toHex(gColor)+toHex(bColor);
   obj.style.background = "#ff"+newColor;
   timer2=setTimeout("fadeOutColor()",200);
}
function toHex(num)
{
  var tt,t,hh,h;
  tt = Math.floor(num/16);
  t  =num % 16;
  switch(tt)
  {
    case 10:
   hh="A";
   break;
case 11:
   hh ="B";
   break;
case 12:
   hh ="C";
   break;
case 13:
   hh ="D";
   break;
case 14:
   hh ="E";
   break;
    case 15:
   hh ="F";
   break;
default:
   hh =tt.toString();
   break;
  }
  switch(t)
  {
    case 10:
   h="A";
   break;
case 11:
   h ="B";
   break;
case 12:
   h ="C";
   break;
case 13:
   h ="D";
   break;
case 14:
   h ="E";
   break;
    case 15:
   h ="F";
   break;
default:
   h =t.toString();
   break;
  }
  return (hh+h);
}
</script>
</head><body>
<form name="form1" method="post" action="">
      <input type="text" name="test" id="test"  onclick="clickEvent('test');"/>
</form>
</body>
</html>
jquery一句话就搞定了。 $("#div1").fadeIn(2000, function() {
                $("#arrow1").attr("src", "image/arrow/4c.gif");
            });
不过不要忘记引用库
加点小改动，在clickEvent中清空bColor,gColor,这样可以点多次
function clickEvent(objID)
{
  this.objID = objID;
  changeColor();
  timer1=setTimeout("fadeOutColor()",1000);  gColor=0;
  bColor=0;
}
IE可用，FF还有问题<INPUT TYPE="text" NAME="inp" id="inp">
<INPUT TYPE="button" VALUE="提交" ONCLICK="check()">  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>
要加入jquery的插件库，名叫color
楼主啊，我的方法在IE,FF下都可以运行的
23楼的方法确实可以实现我的需求。如果用jquery做，该怎么写？
晕啊，还没解决啊？？？？？
<script src="../JQueryJS/jquery-1.4.2.js" type="text/javascript"></script><script src="../JQueryJS/jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script><script language="javascript">
    $(function()
    {
        $("#button").click(function()
        {
            if ($("#effect").val() == "")
            {
                $("#effect").addClass("class2");
                $("#effect").addClass("class1", 200, function()
                {
                    $("#effect").removeClass("class1", 200);
                });
            }
            else
            {
                $("#effect").removeClass("class2");
            }        }
                );    });</script><style type="text/css">
    .class1
    {
        background-color: #FF3300;
    }
    .class2
    {
        border: 2px solid red;
    }
</style>
</head>
<body>
    <input id="effect" />
    <input type="button" id="button" value="点击改变样式" />
</body>