jquery动画不会更改为自动高度

Posted 2023-05-08

【中文标题】jquery动画不会更改为自动高度

【英文标题】：jquery animation not change to height auto

【发布时间】：2014-10-12 10:09:29

【问题描述】：

我有这样的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。

【问题讨论】：

javascript jQuery Animate to Auto Height 的可能副本。检查它:)。

没有朋友 我已经检查了这些答案，但没有我需要的答案。我需要更改此高度自动以响应 tab_minimized 类。该 div 必须获得自动值才能响应。如果不是我的一些文本被底部边框切割

在 css3 中我们可以使用 !important 我需要现在有没有办法将高度设置为自动。如果我使用检查元素更改高度自动它可以正常工作

您是否尝试过使用过渡或关键帧？您不能将!important 设置为animate。我建议你使用 CSS3 过渡或关键帧，最好是 jQuery animate。您可以使用animate 的属性设置一个类，并在更改类时使用transition。

是的，我试过了，但没用。我必须开始宽度 200px 宽度和 140px 高度框，需要一键将其更改为 1000px 和高度自动。如果您知道更好的方法来扩展动画，请告诉我。不管怎么做，我只需要做这项工作:)

【参考方案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 属性中。

【讨论】：

谢谢谢谢它帮助了我......在再次改变小谢谢之后。我不能提高你的声望，因为我还没有 10 声望。当我得到 10 时，我会提高你的声誉。再次感谢

【参考方案2】：

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

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

【讨论】：

朋友，但它不起作用我需要这个来响应最大高度不这样做。当我重新调整浏览器大小时高度不会改变