JQuery animation doesn't resize to height
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 its value to 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 the value height: 500px
to auto
, but if I use auto
then the tab_minimized
class 140px
only gets older the height. it's not changing the height auto
. "Is there an easy way to change the height auto
in my css.
source to share
As per your comment, you need to change width
and height
animation, and the height should 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 to help you.
Note. I only put properties width
and height
. You can add other properties for example border
. If you need transition
these properties, you must add a property transition
.
source to share