Toggle class with animation

Question

I want to have something like this :

$('#fo').toggleClass('tra', 'slow');

I know that i can achieve this with jQuery UI but i'm looking for a faster and smaller solution because i don't wanna integrate in my site another 20-90 kb

possible duplicate of [ToggleClass animate jQuery?](http://stackoverflow.com/questions/11179238/toggleclass-animate-jquery) — putvande, Aug 08 '13 at 18:34
@putvande this is no duplicate, OP says he does *not* want to use jQuery — Vincent van der Weele, Aug 09 '13 at 08:03

score 0 · Answer 1 · answered Aug 08 '13 at 18:40

Use .animate() instead. You'll need to animate the individual styles that you want changed. E.g. .animate( { height: "500px", width: "200px" }, 2000 ) to change the height and width to those values over 2 seconds. jQuery UI lets you derive animations from class changes, pure jQuery doesn't.

score 0 · Answer 2 · answered Aug 08 '13 at 18:48

0

Without JQuery UI, you'll probably have to CSS3 transitions/animations that trigger at the right time (see http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time) or just .animate with JQuery.

answered Aug 08 '13 at 18:48

Babatunde

81
4

score 0 · Answer 3 · edited May 23 '17 at 12:17

You can do something like this (but it's not the cleanest):

function animateClass(el, klass) {
    var endCSS = el.toggleClass(klass).css();
    var startCSS = el.toggleClass(klass).css();
    for ( var p in endCSS ) {
        if ( startCSS[p] === endCSS[p] ) {
            delete endCSS[p];
        }
    }
    el.animate(endCSS, 'slow', function() {
        el.toggleClass(klass).removeAttr('style');
    });
};

It also assumes that you aren't going to add any other inline styles. Though I guess you could replace the animate callback with something like this:

for ( var p in endCSS ) {
    endCSS[p] = '';
}
el.toggleClass(klass).css(endCSS);

It also uses a plugin that extends the use of $.fn.css to return all CSS from How can I get list of all element css attributes with jQuery?

Short Answer

CSS transitions.

score 0 · Answer 4 · edited May 08 '15 at 13:19

0

Specify the animation name as a third parameter.

$('#fo').toggleClass('big-blue', 'slow', "easeOutSine");

edited May 08 '15 at 13:19

chiwangc

3,566
16
26
32

answered May 08 '15 at 12:58

Hemanth

177
2
11

1

The question asks specifically how to do this _without using jQueryUI_, but the parameters used in this answer are exclusive to jQueryUI. – AJPerez Dec 10 '19 at 11:58

Toggle class with animation

4 Answers4

Short Answer