Jquery动画不改变高度自动

jquery animation not change to height auto

本文关键字：高度 改变 动画 Jquery      更新时间：2023-09-26

我有这样的css代码:

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

我用jquery改变了它的值，代码如下:

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

我需要将height: 500px值更改为auto，但如果我使用auto，则tab_minimized类只会变老140px高度。它没有改变为高度auto"。有一个简单的方法来改变高度auto在我的css。

根据你的评论，你需要用动画改变width和height，高度必须改变为auto。你可以用CSS3 transition:

: 

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

你可以在这里看到一个jsFiddle: http://jsfiddle.net/mv147eq8/。我希望能帮到你。

注意:我只放width和height属性。您可以添加其他属性，如border。如果您需要在这些属性中添加transition，则必须添加transition属性。

将动画设置为max-height，这样它将作为auto jsfiddle

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