jquery animation not change to height auto

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.

Problem courtesy of: Rajitha

Solution

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.

Solution courtesy of: Pedro Gámez

Discussion

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);

Discussion courtesy of: Omer Bonfil

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章