jQuery - анимируйте div без деформации контента.

0

Есть ли способ с jQuery для анимации div без деформирования его содержимого?

Пусть мой пример говорит обо мне:

http://jsfiddle.net/v2uHf/4/

В моей функции resizedivs:

function resizedivs() {
    $("#div_3B").animate({
        "width": "0"
    }, 700, function () {

        $("#div_3A").animate({
            "width": "20%"
        }, 700, function () {
            $("#div_3B").animate({
                "width": "80%"
            }, 700);
        });
    });
}

Я бы хотел, чтобы строки в div_3B оставались на своих линиях, не переходя в новую строку, как в слове.

Заранее спасибо.

  • 0
    Я бы лучше оживил позиции, чем ширину в этом случае.
Теги:
jquery-animate

4 ответа

1
Лучший ответ

Просто добавьте white-space: nowrap; на # div_3B (вы уже добавили overflow: hidden;):

http://jsfiddle.net/v2uHf/6/

Поделиться
  • 0
    Что если мне нужно написать длинный абзац без необходимости вставлять его в разные строки? Проверьте этот обновленный пример: jsfiddle.net/v2uHf/10
0

измените свой

стиль элемента к этому

<p style="white-space: nowrap;">I don't want this strings to deform</p>
Поделиться
0

Проблема с white-space: nowrap решение white-space: nowrap заключается в том, что оно влияет на div-макияж. Я бы посоветовал обернуть содержимое новым div и установить для него фиксированную ширину (используя $("#div_3B").width()). Кроме того, вам нужно добавить overflow: hidden до #div_3B. Это можно сделать внутри функции resizedivs. Когда анимация завершится, вы можете очистить дополнительный div.

Поделиться
0

Вот демонстрация

http://jsfiddle.net/v2uHf/8/

      white-space: nowrap;

Надеюсь, вы хотели этого добиться.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню