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?

score 67 · Accepted Answer · edited Jun 18 '14 at 12:59

67

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

toggleClass( class, [duration] )

Docs + DEMO

edited Jun 18 '14 at 12:59

sshow

8,820
4
51
82

answered Jun 24 '12 at 17:12

gdoron

147,333
58
291
367

So if I want to animate/fade this action I have to use whole jQuery UI library?? Is there another way to do this without jQuery UI? – ed1nh0 Feb 13 '13 at 18:16
1

@ed1nh0, You can create a custom jQuery ui with only the pieces of what you need. [See here](http://jqueryui.com/download/), I must admit I have no idea in what category it should be in there. – gdoron Feb 13 '13 at 19:06
3

To use animated toggleClass with jQuery UI, you have to load `Core` and `Effect Core`. See http://jqueryui.com/download/#!themeParams=none&components=1000000000000000000010000000000000 – Hugo H Jan 17 '14 at 14:52
I am having a similar problem. Adding UI still is not working for me. Any ideas? http://jsfiddle.net/jb_fresh/06bc8fwb/3/ – John R Jun 27 '15 at 19:49

thecodeparadox · Answer 2 · 2015-08-20T16:00:24.907

26

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

edited Aug 20 '15 at 16:00

answered Jun 24 '12 at 16:42

thecodeparadox

86,271
21
138
164

With slideToggle() can I set a min height so it doesnt hide completely? – Liam Jun 24 '12 at 16:45

score 18 · Answer 3 · answered Feb 27 '15 at 02:42

18

You can simply use CSS transitions, see this fiddle

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

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

answered Feb 27 '15 at 02:42

Dario Corno

1,129
11
19

1

The best solution. CSS animation and transitions can replace a myriad of (now) unnecessary JavaScript functions and actions and make code much lighter. Nice one Dario – Pete - iCalculator Apr 24 '17 at 11:39

score 8 · Answer 4 · edited May 23 '17 at 12:02

I attempted to use the toggleClass method to hide an item on my site (using visibility:hidden as opposed to display:none) with a slight animation, but for some reason the animation would not work (possibly due to an older version of jQuery UI).

The class was removed and added correctly, but the duration I added did not seem to make any difference - the item was simply added or removed with no effect.

So to resolve this I used a second class in my toggle method and applied a CSS transition instead:

The CSS:

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}

The JS:

    function showOrHide() {
        $('#element').toggleClass("hidden shown");
    }

Thanks @tomas.satinsky for the awesome (and super simple) answer on this post.

score 6 · Answer 5 · edited Sep 11 '14 at 22:34

6

You should look at the toggle function found on jQuery. This will allow you to specify an easing method to define how the toggle works.

slideToggle will only slide up and down, not left/right if that's what you are looking for.

If you need the class to be toggled as well you can deifine that in the toggle function with a:

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});

edited Sep 11 '14 at 22:34

d_rail

4,109
32
37

answered Jun 24 '12 at 16:44

Brombomb

6,988
4
38
57

1

Thanks @Brombomb, I'm currently using toggleClass() I was just unsure if I can add an animation to it too. – Liam Jun 24 '12 at 16:46
2

As a sidenote (because I didn't notice this at first), .toggle() allows you to animate the hiding or showing of an element in the DOM. I'd thought at first that it would animate the transition between class states, which isn't the case. – Matt Jun 19 '13 at 08:18

score 0 · Answer 6 · answered Jun 24 '12 at 16:49

0

Should have checked, Once I included the jQuery UI Library it worked fine and was animating...

answered Jun 24 '12 at 16:49

Liam

9,725
39
111
209

ToggleClass animate jQuery?

6 Answers6

Linked