How to use .animate() to override jqm listview theme styling

问题

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.

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.

Check out this fiddle for both approaches

回答1:

From the jQuery docs:

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).

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
}

Here's the JSFiddle.

来源：https://stackoverflow.com/questions/19215818/how-to-use-animate-to-override-jqm-listview-theme-styling