javascript - SlideToggle动画会中断图像和文本

我正在尝试使slidetoggle在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移至description div内，还尝试在第一个动画后设置.delay，但是技巧都没有。

最佳答案

更改Services.css中的第83行：

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

min-height搞砸了。

否则，您必须在整个部分中修复HTML + CSS，因为它不是理想的选择。