Question

我试图动画div的高度，所以它扩展到自动高度 - 我知道这是不可能的，这就是我尝试使用maxHeight的原因。这个错误很多。有什么想法吗？包括Snippet和jsFiddle。

对于凌乱的代码感到抱歉 https://jsfiddle.net/2d6ry1fL/1/

＆＃13;

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

＆＃13;

  .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;
  }

＆＃13;

<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>

＆＃13;

Answer 1

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

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

HTML：

  Configuration cfg=new Configuration();  
  cfg.configure("your_database_configuration_file.cfg.xml");
  SessionFactory factory=cfg.buildSessionFactory();  
  Session session=factory.openSession();  
  Transaction t=session.beginTransaction();  

  TranstateData e1=new TranstateData();  
  e1.setId(idR);  
  e1.setData(dataR);  
  session.persist(e1);
  t.commit();
  session.close();

JS：

<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>

另外不要忘记包含bootstrap css

maxHeight的jQuery动画

1 个答案: