javascript - maxHeight 的 jQuery 动画

Question

我试图为 div 的高度设置动画，因此它会扩展到自动高度 - 我知道这是不可能的，这就是我尝试使用 maxHeight 的原因。这虽然有很多错误。任何想法为什么？包含代码片段和 jsFiddle。

抱歉乱码 https://jsfiddle.net/2d6ry1fL/1/

$(".seeMore").click(function(){
  var val = $(this).text();
  if (val == "Read more") {
  $(this).parent().animate({maxHeight:"1000px"});
  $(this).text("Read less");
  $(this).siblings('.gradientBox').css('display','none');
} else {
  $(this).parent().animate({maxHeight:"100px"});
  $(this).text("Read more");
  $(this).siblings('.gradientBox').css('display','block');
}
  return false;
  });

  .inspArticle {
    width: auto;
    margin: 1%;
    margin-bottom:2%;
    border: 1px solid $tableBorder;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
  }
  .more {
  height: 160px;
  overflow: hidden;
}
  .seeMore {
    position: absolute;
    right: 42px;
    bottom: 12px;
    width: 133px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<section class="inspArticle more">
      <section>
        <article>
          <h3 class="inspHeadline">How to use your new  Brochure</h3>
          <p class="date">21/09/17</p>
          <p>We have just visited your shop and handed you our new brochure. The new Water Utility Range Brochure is presenting our competencies within water supply and wastewater and our product offerings for optimised water solutions.</p>
          <p>At, we are meeting the challenges facing the water supply and wastewater industry head on. The Range Brochure tells how we design lifecycle costs into solutions to make life easier for everyone.</p>
          <p>Use the brochure to inspire you costumers to make a different when choosing products for their work </p>
          <button class="primaryAction">Find brochure</button>
        </article>
      </section>
      <div class="gradientBox"></div>
      <button class="secondaryAction seeMore">Read more</button>
    </section>
    

Answer 1

如果您愿意使用 Bootstrap，它可以很容易地做到这一点:

https://jsfiddle.net/AP__/pwxk9Ltp/3/

html:

<section id="inspArticle" class="collapse in">
  <section>
    <img src="img/grundfosWaterUtilityRangeBrochure.jpg" alt="Grundfos Water Utility Range Brochure">
    <article>
      <h3 class="inspHeadline">How to use your new Grundfos Brochure</h3>
      <p class="date">21/09/17</p>
      <p>We have just visited your shop and handed you our new Grundfos brochure. The new Grundfos Water Utility     Range Brochure is presenting our competencies within water supply and wastewater and our product offerings for     optimised water solutions.</p>
      <p>At Grundfos, we are meeting the challenges facing the water supply and wastewater industry head on. The     Range Brochure tells how we design lifecycle costs into solutions to make life easier for everyone.</p>
      <p>Use the brochure to inspire you costumers to make a different when choosing products for their work </p>
      <button class="primaryAction">Find brochure</button>
        </article>
  </section>
  <div class="gradientBox"></div>
</section>
<a class="secondaryAction" data-toggle='collapse' href='#inspArticle'>Read Less</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

js:

$('.collapse').on('shown.bs.collapse', function() {
  $("a.secondaryAction").text('Read Less');
}).on('hidden.bs.collapse', function() {
  $("a.secondaryAction").text('Read More');
});

也不要忘记包含 Bootstrap css