SlideToggle 애니메이션이 이미지와 텍스트로 깨집니다.

Question

div에서 Slidetoggle이 제대로 작동하려고합니다. 나는 다음과 같은 형식으로 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> 

다음과 같이 나 또한 자바 스크립트가 있습니다

$('.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

화살표를 클릭하면 gracefuly 슬라이드를 만들고 아래쪽 화살표를 클릭하면 같이 나타나게하는 방법이 있습니까?

또한 이미지 div를 description 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를 수정해야합니다.