JQuery: how to fade between classes?

Question

I need to be able to fade between classes and move smoothly to any style that applies to an element and its children. How can this be done using jQuery? I know how to add / remove classes, but this is not the same as a good transition between two completely different colors.

Answer 1

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

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

For example, I do this on one of my sites (disappears to / from the light class and disappears / leaves the dark class):

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

Answer 2

Is this what you are trying to achieve? Here jsFiddle

HTML:

 <input type="button" id="toggle" value="toggle" /> <br /> <div id="classContainer"> <div id = "class1"> </div> <div id = "class2"> </div> </div> 

JQuery

 $("#toggle").click(function (){ if ($("#class1").is(":visible")) { $("#class1").fadeOut(); $("#class2").fadeIn(); } else { $("#class1").fadeIn(); $("#class2").fadeOut(); } }); 

CSS

 #classContainer { position: relative; } #class1, #class2 { height: 100px; width: 100px; position: absolute; top: 0; left: 0; } #class1 { background-color: red; display: none; } #class2 { background-color: blue; } 

Answer 3

Check out the color plugin for jQuery: https://github.com/jquery/jquery-color

Answer 4

Try fadeIn.

 $(".myClass").fadeIn("slow"); 

http://api.jquery.com/fadeIn/

Although depending on the complexity, you may need the jQuery user interface that others talked about.