SlideToggle動畫打破圖像和文字

Question

我試圖讓一個幻燈片在div上正常工作。我有以下格式HTML：

<div class="root-div first-service"> 
    <div class="title-div gradient"> 
      <div class="title-div-left"> 
       <p>$ServiceName</p> 
      </div> 
      <div class="title-div-right"> 
       <p>&#x25B2;</p> 
      </div> 
     </div> 
     <div class="description-div show minimum-height"> 
      <div class="description-content-div"> 
       $ServiceDescription 
      </div> 
     </div> 
     <div class="services-image-two"> 
      <img src="themes/theinneryou/images/ServicesImage2.jpg" alt="Missing Image"/> 
     </div> 
</div> 

我也有JavaScript的如下：

$('.title-div').on('click', function() { 
    var arrow = $(this).find('.title-div-right'); 
    if (proceed) { 
     proceed = false; 
     $(this).closest('.root-div').find('.services-image-two').slideToggle("slow"); 
     $(this).closest('.root-div') 
     .find('.description-div') 
      .slideToggle("slow", function() { 
       $(arrow).text().trim().charCodeAt(0) == 9650 ? $(arrow).html('<p>&#x25BC;</p>') : $(arrow).html('<p>&#x25B2;</p>'); 
       proceed = true; 
      }); 
    } 
}); 

，我得到的是圖像本身起着幻燈片的動畫，然後獲取隱藏的影響，然後包含文本的下一個div的其餘部分僅在沒有任何動畫的情況下隱藏。圖像與文本div重疊，因爲我擁有絕對定位。您可以在tiu.azularis.com/Services上看到現場演示

當我單擊箭頭並單擊向下箭頭時，是否有一種方法可以使它們優雅地滑動在一起？

我也嘗試在描述div內移動圖像div，並且在第一次動畫之後嘗試設置.delay，但都沒有這個技巧。在Services.css

Answer 1

更改線路83：

.services-wrapper .expansion-wrap .first-service .minimum-height { 
    /* min-height: 20.4rem; */ 
    height: 20.4rem; 
} 

min-height是搞亂起來。

否則，您必須修復整個部分的HTML + CSS，因爲它並不理想。