如何使用 .animate() 覆盖 jqm listview 主题样式

Question

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

我似乎无法完成这项工作，尽管我可以使用.addClass(".red") 立即将 li 的背景色变为红色。这种方法可以工作，但我想为 addClass() 建立一个较慢的持续时间，这也不起作用。

查看this fiddle 了解这两种方法

Answer 1

来自jQuery docs：

所有动画属性都应动画为单个数值， 除非如下所述；大多数非数字属性不能 使用基本 jQuery 功能（例如，宽度、高度、 或 left 可以设置动画，但 background-color 不能设置，除非 使用 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。