add animate effect to addClass/removeClass with jquery

Question

I am using jquery and jquery-ui and want to animate attributes on "div" tag.I want to change height from numeric value to "auto" but this effect does not work. it's properly working when i'm using a numeric value for height but it does'nt work using auto!

I've tried this so far: See demo: jsfiddle

No link to fiddle, place code here for better response. – rfornal Dec 04 '14 at 22:21 — rfornal, Dec 04 '14 at 22:21

score 0 · Answer 1 · answered Dec 04 '14 at 22:24

0

Basically, what I see is that it is working. Remove the effects. To ANIMATE, you need to animate to numeric values.

answered Dec 04 '14 at 22:24

rfornal

5,072
5
30
42

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

This way doesn't use addClass/removeClass but it works all the same. It uses animate and since you are already using the JQuery UI you'll be able to use it as is.

JSFiddle

$("#effect1").click(function() {
    var el = $(this),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 'fast');
});

Answer based on: JavaScript jQuery Animate to Auto Height

add animate effect to addClass/removeClass with jquery

2 Answers2