jQuery - slideToggle과 애니메이션을 결합 할 때 깜박임

Question

숨겨진 div를 사용하려고합니다. 버튼을 눌러서 보이게 만듭니다. 다른 div의 부분을 "밀기"를 원합니다. div는 동일하게 유지됩니다.

이제는이 작업을 수행 할 수 있지만 숨겨진 div 아래 div는 깜박 거리거나 약간 위아래로 튀어 오릅니다. 이는 내 애니메이션이 동시에 발생하지 않기 때문일 수 있습니다. 다음은

내 코드입니다 :

HTML :

<div id="wrapper"> 
    <div id="button">CLICK</div> 
    <div id="content"></div> 
    <div id="hidden"></div> 
    <div id="bottom"></div> 
</div> 

CSS :

#wrapper { 
    border: 1px solid green; 
    width 300px; 
} 
#content { 
    border: 1px solid red; 
    height: 200px; 
} 
#hidden { 
    border: 1px solid blue; 
    height: 100px; 
} 
#bottom { 
    height: 20px; 
    border: 1px solid purple; 
} 

JAVASCRIPT

$("#button").click(function (e) { 
     var newHeight = $("#content").height(); 
     var hiddenHeight = $("#hidden").outerHeight(); 
     var visible = $("#hidden").is(":visible"); 

     newHeight += (visible ? hiddenHeight : -hiddenHeight); 

     $("#hidden").slideToggle({ 
      duration: 200, 
      queue: false 
     }); 

     $("#content").animate({ 
      height: newHeight 
     }, { 
      duration: 200, 
      queue: false 
     }); 
    }); 

바이올린 : http://jsfiddle.net/2exxrs1n/

이 문제를 해결하는 방법이나 내 문제에 대한 대안이 있습니까?

Answer 1

jquery 애니메이션이 완벽하게 동기화되지 않았기 때문에 추측 할 수 있습니다. CSS3 전환을 고려해보십시오.

transition-duration: 0.5s; 

내가 완벽하게 작동