jQuery 애니메이션 결함?

Question

Here은 문제의 바이올린입니다. 나는 span에 display: inline-block을 가지고 있는데, 다른 하나는 span이고, 나는 천천히 숨어 있습니다. 결국, 컨테이너 span은 일시적으로 초기 위치로 "뒤로 이동"합니다.

이것은 버그입니까? 예상되는 동작입니까?

Answer 1

문제는 애니메이션 (계산) 폭 폭을 추가 할 가능성이

<div class='container'> 
    <span>Text 1</span><br/> 
    <span class='big'>Much more text</span> 
</div> 

및 브라우저 (적어도 내 크롬)는 해당 분수를 렌더링하지 않으며 #text 요소가 원래 너비로 다시 스냅됩니다. 애니메이션 시간을 매우 길게 (예 : 25 초) 늘리고 콘솔에서 css 값을 볼 때이 동작을 볼 수 있습니다.

이 시도하는 경우 :

$('#text').delay(1000).animate({ 
    width: 1, 
    height: 1, 
    opacity: 0 
}, 5000, function() { 
    $(this).hide(); 
}); 

당신은 스냅없이 거의 같은 애니메이션을 얻을 수 있습니다.

Answer 2

아닌 정확하게하려고 노력하지만,이 시도하고있는 무슨 확인 : 컨테이너

.container { 
    border: solid 3px blue; 
    width:200px; 
}