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.

Possible duplicate: http://stackoverflow.com/questions/2176413 — Robert Harvey, Jan 20 '12 at 00:37
You can do this with jQuery UI's Transition plugin (IIRC), but I'm loath to recommend jQuery UI, but that's personal preference. — Bojangles, Jan 20 '12 at 00:37
Does it have to be done with jQuery? Most recent browsers (except, of course, IE, except for possibly the next version, IE10) support CSS transitions to some degree if you use their proprietary style rules. Or is that the problem? — JayC, Jan 20 '12 at 01:02

score 9 · Accepted Answer · answered Jan 20 '12 at 00:37

9

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

answered Jan 20 '12 at 00:37

Matt

22,721
17
71
112

that looks extremely promising. i will have to check it out. thanks! – Andrew Jan 21 '12 at 00:27
1

since your answer technically achieves what I was asking, I'm giving you the credit, but my experience with the jQuery UI class animations was horrible. I ended up hacking something together that involved fading in/out layers that were positioned behind the content. – Andrew Jan 21 '12 at 00:42
In that case, there might be a more effective way to structure your layout. Sometimes I have to iterate my plans a half-dozen times before it starts being functionally sane. :) – Matt Jan 21 '12 at 04:59
I wonder why this is not documented in the jQuery API http://api.jquery.com/toggleclass/ – Black Feb 16 '16 at 13:40
@EdwardBlack because as the answer says, it's jQuery UI, not jQuery core. – David Morales Sep 13 '16 at 15:03

score 3 · Answer 2 · answered Jan 20 '12 at 00:48

Is this what you're trying to accomplish? Here's the 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;
}

this is basically what i ended up doing – Andrew Jan 22 '12 at 22:43 — Andrew, Jan 22 '12 at 22:43

score 0 · Answer 3 · answered Jan 20 '12 at 00:37

0

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

answered Jan 20 '12 at 00:37

Tom

1,095
2
12
30

score 0 · Answer 4 · answered Jan 20 '12 at 00:38

0

Try fadeIn.

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

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

Although depending on the complexity you may need jQuery UI as other have mentioned.

answered Jan 20 '12 at 00:38

Ian Hoar

1,174
1
19
40

3

This will fade in the elements, not the class applied to the elements. – Matt Jan 20 '12 at 00:39
True, this functionality should be in jQuery core imo. – Ian Hoar Jan 20 '12 at 00:46

jQuery: how to fade between classes?

4 Answers4

Linked