.switchClass() acts on classes but easing does not occur

Question

I am trying to reveal a set of divs with a given class by using the jQuery UI switchClass() method (the class I am switching is not the one I am using to select the divs)

My main objective is that the divs should animate between states, which specifically is a height adjustment (from zero - hidden, to non-zero revealed).

The switchClass method allows you to specify the transition time, which I have done, but while the classes switch correctly, the state is delayed-instantaneous (not transitional. So after a delay equivalent to the ease time specified, the class swap happens instantly.

Here is my code:

jQuery

        function revealWarnings(){
        $('.container-warning').switchClass( 'packed', 'unpacked', 1000, 'linear' );            
    }

CSS

.packed{
height:0 !important;
}
.unpacked{
height:32px !important;
}

My jQuery UI (stated from my source file) is:

jQuery UI - v1.11.4 - 2015-04-05

Answer 1

The problem is the !important notation in your css rules, which overrides the inline css applied by the animation.

.packed {
    height:0;
}
.unpacked {
    height:32px;
}

Demo: Fiddle

Note: If you had any specific reason to use !important, please share them(and recreate the issue using the above fiddle) so that we can have a look at it.

---

If you can use css3 animations then

.container-warning {
    overflow-y: hidden;
    transition: height 1s;
}
.packed {
    height:0 !important;
}
.unpacked {
    height:32px !important;
}

then

$('.container-warning').removeClass('packed').addClass('unpacked');

Demo: Fiddle