jquery animation not change to height auto

Question

I have css code like this:

.tab_minimized {
   border-radius:20px;
   border: #0D68FF 16px solid;
   width:200px;
   height:140px;
   top: 300px;
   overflow:hidden;
}

And I changed value of it by jquery with this code:

$("#clickLaptop01").click(function() {
   $("#clickDetailTab01").removeClass( "tab_hide" );
   $("#clickDetailTab01").addClass( "tab_minimized").animate({
          height:"500px",
          width:"100%",
          top:"50px",
          borderWidth:"30px",
          borderRadius: 45
   },1500);
});

I need to change height: 500px value to auto but if I use auto there tab_minimized class get older 140px height only. it was not change to height auto". Is there a easy way to change height auto in my css.

possible duplicate of [JavaScript jQuery Animate to Auto Height](http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height). Check it :). — SnakeDrak, Aug 19 '14 at 10:45
no friend I have checked those answers already but there is no answer I needed. I need to change this height auto to be responsive that tab_minimized class. that div must get auto value to responsive. if not some of my text are cut by bottom border — Rajitha, Aug 19 '14 at 10:56
In css3 we can use !important i need to now is there a way to set height as auto. if i change height auto in using inspect element It works correctly — Rajitha, Aug 19 '14 at 10:59
have you tried to use transitions or keyframes? You can't set `!important` with `animate`. I recommend you use CSS3 transitions or keyframes, it's better that `jQuery animate`. You can set a class with the properties of `animate` and use a `transition` when change the class. — SnakeDrak, Aug 19 '14 at 11:02
yes i tried but it not worked. I have to start width 200px width and 140px height box and need to change it to 1000px and height auto by one click. with expanding animation if u know better way to do that please let me know. i need to do the work only no matter how to do that :) — Rajitha, Aug 19 '14 at 11:18
See my [answer](http://stackoverflow.com/questions/25381208/jquery-animation-not-change-to-height-auto/25382480#25382480) to use CSS3 transitions insteand of `jQuery animate`. The code change to `height: auto` with a 1.5s transition. — SnakeDrak, Aug 19 '14 at 11:46

score 2 · Accepted Answer · edited May 23 '17 at 12:13

According to your comment you need change the width and height with a animation and the height must change to auto. You can do it with CSS3 transition:

HTML:

<div id='clickDetailTab01'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<button id='clickLaptop01'>Show</button>

CSS:

#clickDetailTab01.tab_minimized {
   width: 1000px;
   height: auto;
}
#clickDetailTab01 {
    overflow:hidden;
    width: 200px;
    height: 140px;
    transition: height 1.5s, width 1.5s;
}

JavaScript:

$(document).ready(function(){ 
    $("#clickLaptop01").click(function() {
       $("#clickDetailTab01").toggleClass( "tab_minimized" );
    });
});

You can see a jsFiddle here: http://jsfiddle.net/mv147eq8/. I hope help you.

Note: I only put width and height properties. You can add other properties like border. If you need a transition in these properties, you must add to the transition property.

Thanks Thanks It helps me...... after changing little thanks again. I cant up your reputation because I have no 10 reputation yet. when I get 10 I'll up your reputation. thanks again — Rajitha, Aug 19 '14 at 12:31

score 0 · Answer 2 · answered Aug 19 '14 at 11:38

0

Change the animation to max-height, thus it would act as auto jsfiddle

$("#clickDetailTab01").addClass( "tab_minimized").animate({
      maxHeight:"2000px",
      width:"100%",
      top:"50px",
      borderWidth:"30px",
      borderRadius: 45
},1500);

answered Aug 19 '14 at 11:38

Omer Bonfil

417
2
10

friend but it not works I need this one for responsive that max-height not do that. height not changing when i'm re-size the browser – Rajitha Aug 19 '14 at 11:49

jquery animation not change to height auto

2 Answers2