Question

我有这样的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“。是否有一种简单的方法可以在我的CSS中更改高度auto。

Answer 1

根据您的comment，您需要使用动画更改width和height，并且身高必须更改为auto。您可以使用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" );
    });
});

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

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

Answer 2

将动画更改为最大高度，因此它将充当自动jsfiddle

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

jquery动画不会更改为高度auto

2 个答案: