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，但这也没有。

Answer 1

更改Services.css中的第83行：

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

min-height搞砸了。

否则你必须修复整个部分的HTML + CSS，因为它不理想。

SlideToggle动画中断了图像和文本

1 个答案: