ToggleClass animate jQuery?

Question

I have a section on my website that when a user clicks I would like it to expand, I'm using the jQuery's toggleClass for this...

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

This is working fine, only I'd like to somehow animate it. In chrome my article slowly grows to the new size, only in Firefox it 'instantly' resizes itself with no animation, is there a way to have this animate?

Answer 1

jQuery UI extends the jQuery native toggleClass to take a second optional parameter: duration

toggleClass( class, [duration] )

Docs + DEMO

Answer 2

.toggleClass() will not animate, you should go for slideToggle() or .animate() method.

Answer 3

You can simply use CSS transitions, see this fiddle

.on {
color:#fff;
transition:all 1s;
}

.off{
color:#000;
transition:all 1s;
}