jQuery를 시작으로 울퉁불퉁 한 애니메이션이 내 코드입니다

Question

을 종료 (바이올린 here 참조)

$('div').on('click', function() { 
    $('.well') 
     .stop() 
     .animate({ 
     height: "toggle", 
     opacity: "toggle" 
    }); 
}); 

나는 아래의 물건 부트 스트랩 .well 있습니다. 아래 내용을보고 애니메이션의 시작과 끝 부분에서 불연속 점을 확인하십시오.

어떻게 이러한 애니메이션 불연속성을 피할 수 있습니까?

Answer 1

확인이를 http://jsfiddle.net/dLVWr/1/ :

HTML :

<div>Click to show/hide</div> 
<div class='container'> 
    <div class='well'>....</div> 
</div> 
<div>Stuff below</div> 

JS :

$('div').on('click', function() { 
    $('.container') 
     .stop() 
     .animate({ 
     height: "toggle", 
     opacity: "toggle" 
    }); 
}); 

코드의 문제점은 well 사업부가 모두 텍스트 높이를 가지고 있다는 것입니다 및 패딩. 불투명도와 높이를 전환 할 때 먼저 내용 높이가 0이고 패딩이 0입니다. 그것이 바로 그 점프입니다.

이렇게하려면 .animate을 적용하는 div에는 여백/패딩이 없어야합니다.

Answer 2

콘텐츠의 높이에 애니메이션을 적용하고 외부 높이를 무시하기 때문에 작은 곡이 있습니다.

즉, 요소의 display이 토글되면 padding, border 및 margin 값이 입력됩니다. 즉, 애니메이션을 숨기거나 애니메이션을 시작한 직후 애니메이션을 시작한 시점입니다.

대신 .slideToggle()을 사용해야합니다.

$('div').on('click', function() { 
    $('.well').stop().animate(); 
});