jquery背景色动画不适用

时间:2014-12-13 10:39:03

标签: jquery

我遇到了一个奇怪的问题..

row.animate没有做任何事情,但是row.css呢?两种方法都在相同的范围内,就像在这个完整处理函数

中一样
function(){
    row.animate({
        background : 'red'
    }, {
        duration : 200
    });

    row.css({
        background : 'red'
    });
}

2 个答案:

答案 0 :(得分:2)

除非如下所述,否则应将所有动画属性设置为单个数值。大多数非数字属性无法使用基本jQuery功能进行动画处理(例如,widthheightleft可以设置动画,但background-color不能,除非 jQuery.Color() 插件已被使用。

答案 1 :(得分:1)

引自.animate() | jQuery

  

宽度高度可以设置动画,但背景颜色不能,除非{使用{3}}。

您可以改用 CSS3动画

以下是工作代码段



div{
  height: 50px;
  width: 50px;
  background: yellow;
  -webkit-animation: changeColor 5s; /* Chrome, Safari, Opera */
  animation: changeColor 5s;
}

@-webkit-keyframes changeColor {
  from {background: red;}
  to {background: yellow;}
}

@keyframes changeColor {
  from {background: red;}
  to {background: yellow;}
}

<div></div>
&#13;
&#13;
&#13;

读取:jQuery.Color() pluginanimation - CSS | MDN