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

Question

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

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

查看这两种方法的小提琴

Answer 1

来自jQuery 文档：

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 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。