如何将高度动画设置为自动

How can I animate height to auto?

本文关键字：设置 动画 高度      更新时间：2023-09-26

jQuery

$(".facts").click(function(e) {
  if($(this).height() >50) {
    $(this).animate({height:50+'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
    $(this).removeClass("facts_active");
  }else{
    if ( $(".facts_active").length) {
      $(".facts_active").animate({height:50+'px'});
    }
    $(this).animate({height:350 + 'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
    $(this).addClass("facts_active");
  }
});

我想把height动画化为"auto"，而不是把height:350px动画化，以使我的手风琴做出响应。我在谷歌上搜索了它并阅读了一些解决方案，但我不知道如何将其添加到代码中。

如果你能帮我就太好了。

如注释中所述，您无法设置height:auto;的动画，但您可以通过设置max-height的动画并将活动的max-height设置为您知道永远不会超过的值来绕过它。你也可以用更少的Javascript来完成，因为动画可以用CSS3:来处理

$(function() {
  $('.facts').click(function() {
    $(this).toggleClass('active');
  });
});
.facts {
  width:300px;
  max-height:50px;
  overflow:hidden;
  margin-bottom:20px;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
  .facts.active {
    max-height:9999px; /*Height value which will not be exceeded*/
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>

您可以通过使用$('select').height(); 动态计算高度来完成

$(".facts").click(function(e) {
  if($(this).height() >50) {
    $(this).animate({height:50+'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
    $(this).removeClass("facts_active");
  }else{
    if ( $(".facts_active").length) {
      $(".facts_active").animate({height:50+'px'});
    }
    var computedH =  $(this).height(); // compute div's height including content
    $(this).animate({height: computedH + 'px'}); // now you can animate the computed height
    $(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
    $(this).addClass("facts_active");
  }
});

你可以在这个小提琴上做一些类似的事情。

https://jsfiddle.net/pparas/frw0opfv/6/

你必须计算出你想要的高度，然后制作动画。

$(".facts").click(function(e) {
    var newHeight = $('div.inner').height();
    $(this).animate({
        height: newHeight
    });
});

类似于@Arun Sharma的回复。

希望能有所帮助。

Paras

相关文章：