如何使用.animate（）来覆盖jqm listview主题样式

Question

我有一个jqm listview。当用户点击列表视图中的一个li时，我想为li设置动画，使其背景颜色慢慢变为红色。

我似乎无法做到这一点，虽然我可以使用.addClass(".red")立即将li的背景颜色变为红色。这种方法可行，但我想为addClass（）建立一个较慢的持续时间，但这也不起作用。

查看this fiddle两种方法

Answer 1

来自jQuery docs：

  

所有动画属性都应设置为单个数值，   除非如下所述;大多数非数字属性不能   使用基本jQuery功能进行动画处理（例如，宽度，高度，   或左边可以动画，但背景颜色不能，除非   使用了jQuery.Color（）插件。

您可以使用CSS3过渡：

.red {

    background-color:red;
    -webkit-transition:background-color 2s;
    -moz-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s
}

这里是JSFiddle。