jQuery : 애니메이션 후에 div가 전체 크기로 다시 이동합니다.

Question

아래의 jQuery 예제에서 다른 div 안에 하나의 div가 있습니다. inner div를 0의 폭으로 애니메이트 할 때, outer div (절대 위치 지정을 가짐)는 그것과 함께 너비가 감소합니다.

이 것이 바람직합니다.

애니메이션이 끝나면 바깥 쪽 div가 원래 크기로 돌아옵니다. 예상 되나요? 어떻게 이런 일이 일어나지 않도록 할 수 있습니까?

감사합니다.

예

HTML :

<div class="outer"><div class="inner">innerContent</div></div> 

---

CSS :

div.outer { 
    position: absolute; 
    padding: 10px; 
    background: purple; 
} 

div.inner { 
    position: relative; 
    padding-left: 5px; 
    padding-right: 5px; 
    background: orange; 
    clip: auto; overflow: hidden; 
} 

---

0

자바 스크립트 :

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
}); 

Answer 1

'outer'div의 너비와 'inner'div의 outerWidth를 뺀 다음 'inner'div의 outerWidth에서 'outer'div의 너비를 뺀 다음 'outer' 너비를 결과에 동시에 적용하면서 '내부'를 0으로 애니메이션하면 효과가 있습니다.

jquery 또는 webkit 또는 둘 모두에 대한 버그 수정 요청 여부에 대한 의견.

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth(); 
    var outerWidth = $('.outer').width(); 
    var theWidth = outerWidth - innerWidth; 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow'); 
    $('.outer').animate({width: theWidth}, 'slow'); 
}); 

Answer 2

당신이 애니메이션이 완료된 후 0으로 outerbox 폭을 설정 시도?

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() { 
    $('.outer').css("width", 0); 
}); 

Answer 3

우분투 9.04에서 jQuery 1.3.2를 사용하는 Firefox 3.0.10에 대한 제게 이것은 완벽하게 작동합니다. 페이지의 다른 HTML 요소와 상호 작용할 수 있습니까?

Answer 4

내 테스트에서 IE, FF 및 Opera에서 제대로 작동하지만 Chrome 및 Safari에서 언급 한 버그가 생성됩니다.