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 kn

Answer 1

Is this what you're trying to accomplish? Here's the jsFiddle

HTML:

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;
}