Question

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

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

中一样

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

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

Answer 1

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

Answer 2

引自.animate() | jQuery：

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

您可以改用 CSS3动画！

以下是工作代码段：

＆＃13;

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;}
}

＆＃13;

<div></div>

＆＃13;

读取：jQuery.Color() plugin和animation - CSS | MDN

jquery背景色动画不适用

2 个答案: