css - jQuery: how to fade between classes?

Question

I need to be able to fade between classes and seamlessly transition any and all styles being applied to the element and its children. How can this be done using jQuery? I know how to add/remove classes but that is not the same as a nice transition between two drastically different colors.

Answer 1

jQuery UI has a toggleClass function that has an argument for duration:

http://jqueryui.com/demos/toggleClass/

For example, I do this on one of my sites (fade in/out the light class and fade/in out the dark class):

$('body').toggleClass('light', 250).toggleClass('dark', 250);