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

Question

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

Maybe some of these answers can help http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — user1234, Oct 07 '13 at 02:24
@Tim, Thanks for pointing me to those answers, which I missed on my initial search. Many of the answers are old (2-5 years), and point to the jQuery color animation plugin. It is my understanding that jQuery UI includes support for color animation for several years now, and the plugin is no longer being supported. Regardless, jQuery's `.animate()` should work, but for some reason color animation doesn't seem to work inside of a jqm listview, as shown in the fiddle. — chuck w, Oct 07 '13 at 17:23
This might sound trivial, but have you considered using CSS transitions on the `

user1234 · Accepted Answer · 2013-10-07T17:58:05.867

0

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.

edited Oct 07 '13 at 17:58

answered Oct 07 '13 at 17:50

user1234

7,860
4
27
36

I guess that I misread the docs . . . I have come across so many JQ color animation examples, that I thought that it was possible. Turns out that they were all using jQuery.Color(). As you pointed out, (and @Terry above) CSS translations can address the problem. At first i couldn't figure out a good way to reverse the animation, but then I found [this](http://stackoverflow.com/questions/14821343/css-transition-going-backwards-reverse) SO question and it filled in the gaps of my knowledge. Thanks! – chuck w Oct 08 '13 at 15:59
Glad you got it all figured out! – user1234 Oct 08 '13 at 16:12

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

1 Answers1

Linked