JQuery: Есть ли способ анимации ширины div без перемещения текста?

Я использую jQuery для сжатия ширины div, например:

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

Пока он сокращается, текст переполняется, чтобы соответствовать все более-менее div. Я не хочу, чтобы это произошло - я хочу, чтобы текст оставался таким, какой он есть, просто исчезает из-за уменьшения ширины, как это происходит, если вы делаете $('div#foo').slideUp().

Есть ли трюк CSS или какой-либо другой способ сделать это?

Ответы

Ответ 1

Live demo: http://jsfiddle.net/AvYyT/1/

Фокус в том, чтобы использовать внутренний контейнер и устанавливать его с шириной внешнего контейнера.

Ответ 2

Вы можете использовать jQuery для установки ширины содержимого с помощью div, добавить overflow:hidden в div и только затем уменьшить ширину.

Что-то вроде (непроверенный, может иметь опечатки, но вы получаете идею...):

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

Но это зависит от содержимого div, это не сработает, если в нем есть изображения.

Ответ 3

Один из вариантов - использовать white-space: nowrap; в div. Единственная проблема заключается в том, что вам придется вручную добавлять разрывы строк, если у вас длинный текст.

Ответ 4

В вашем div CSS используйте: overflow-x: hidden; overflow-y: hidden;

Ответ 5

попробуйте дать ему vertical-align:top