jQuery : 텍스트 이동없이 div의 너비를 애니메이션하는 방법이 있습니까?

Question

$('div#foo').animate({width: 0},someSpeed); 

이 줄어들고있어하는 동안, 텍스트가 계속 얇은 div에 맞게 리플 로우 :

나는이처럼 div의 폭을 축소하기 위해 jQuery를 사용하고 있습니다. 나는이 일이하고 싶지 않아 - 폭이 감소함에 따라 당신이 $('div#foo').slideUp()을 할 경우 어떻게 나는, 그냥보기에서 사라지고, 그대로 텍스트가 있고 싶어.

의 의

CSS의 트릭이나이 일을 몇 가지 다른 방법이 있나요?

의

Answer 1

라이브 데모 :http://jsfiddle.net/AvYyT/1/

트릭 내부 용기를 사용하여 외부 용기의 너비와의 세트이다.

Answer 2

가 귀하의 사업부의 CSS에서 vertical-align:top

Answer 3

을 제공하려고 사용 : overflow-x: hidden; overflow-y: hidden;

Answer 4

당신의 div의 함께 할 콘텐츠의 폭을 설정하기 위해 jQuery를 사용하는 경우에만 다음 div과에 overflow:hidden을 추가 할 수 있습니다 너비를 줄이십시오.

같은 뭔가 (테스트되지 않은, 오타가 있지만, 당신은 아이디어 ... 얻을 수) : 그 안에 이미지가있는 경우,이 작동하지 않을

var el = $('div#foo'); 
el.children().each(function() { 
    $(this).width(el.width()); 
}); 
el.css('overflow', 'hidden').animate({width: 0}, someSpeed); 

을하지만 그것은 div의 내용에 따라 달라집니다 .

Answer 5

하나의 옵션은 div에서 white-space: nowrap;을 사용하는 것입니다. 유일한 문제는 긴 텍스트 본문이있는 경우 수동으로 줄 바꿈을 추가해야한다는 것입니다.