Подробнее кнопка, которая постепенно удаляет максимальную высоту

Question

У меня есть кнопка «Подробнее», которая увеличивает высоту div, удаляя атрибут css max-height, но мне нужна анимация, например, с функцией jQuery slideToggle(), чтобы «вытащить «Остальная часть div.

Это мой код:

<div id="Presentation" style="text-align:justify;"><?php echo $data['texte_presentation'];?></div> 
      <div id="fadeout" class="fadeout" style="display:none;"></div> 
       <div id="DivReadMore" style="text-align:right;margin-top:-4em;display:none;"> 
       <hr style="margin:5px;"><button id="BoutonReadMore" class="btn btn-warning btn-block"><i class="fa fa-plus"></i> Lire la suite</button> 
       </div> 
      <script> 
      $(document).ready(function() { 
       ReadMore(); 
       $(window).on('resize', function(){ 
        if($('#Presentation').hasClass("read-more")) 
        {}else{ 
         ReadMore(); 
        } 
       }); 
       $("#BoutonReadMore").click(function(){ 
        $("#Presentation").css({'max-height':'', 'overflow':''}); 
        $("#DivReadMore").hide(); 
        $("#fadeout").hide(); 
        $("#Presentation").addClass("read-more"); 
       }); 
      }); 
      function ReadMore() { 
       var hauteur = $('#Presentation').height(); 
       if(hauteur > 200) 
       { 
        $("#Presentation").css({'max-height':'250px', 'overflow':'hidden'}); 
        $("#fadeout").show(); 
        $("#DivReadMore").show(); 

       }else{ 
       $("#Presentation").css({'max-height':'', 'overflow':''}); 
        $("#fadeout").hide(); 
        $("#DivReadMore").hide(); 
       } 
      } 
      </script> 

Вы идею?

Answer 1

Поместите это в css блока: transition: ease 0.5s all;. Возможно, что он не работает из-за отсутствия максимальной высоты на блоке.

Трюк, который мне нравится делать, - это просто увеличить максимальную высоту с помощью jQuery.animate. Это создает анимацию :)