如何使用.animate()覆盖jqm listview主题样式 [英] How to use .animate() to override jqm listview theme styling

问题描述

我有一个jqm列表视图.当用户单击列表视图中的li之一时，我要为li设置动画，以便其背景颜色逐渐变为红色.

I have a jqm listview. When a user clicks one of the li in the listview I want to animate the li so that it's background color slowly changes to red.

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

I can't seem to make this work, although I can use .addClass(".red") to instantly turn the li's background-color to red. This approach could work, but I'd want to establish a slower duration for the addClass(), and that doesn't work either.

查看此小提琴两种方法

推荐答案

来自 jQuery文档:

所有动画属性均应设置为单个数值， 除非如下所述；大多数非数字属性不能是 使用基本的jQuery功能(例如，宽度，高度， 或可以向左动画，但背景色不能，除非 使用jQuery.Color()插件).

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).

您可以使用CSS3过渡:

You could use CSS3 transitions though:

.red {

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

这是 JSFiddle .

这篇关于如何使用.animate()覆盖jqm listview主题样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！