jQuery анимация slideLeft без переноса текста

Question

Я хотел бы показать / скрыть абзац текста, используя jQuery слева направо.

Я использую

$('#text').animate({
     width: ['toggle', 'swing']
});

Однако я вижу, что абзац переносится, когда происходит анимация. И это выглядит некрасиво.

См. эту js fiddle для примера нежелательного эффекта.

Как бы вы порекомендовали получить тот же эффект, но без упаковки? (Как .slideUp() / slideDown()) ...

Спасибо за любую помощь

Answer 1

Вам необходимо установить overflow: hidden для контейнера, а затем применить анимацию к контейнеру.

Обновленная скрипта с исправлением здесь

Answer 2

Попробуйте:

CSS:

#wrap{
 width:200px;   
    overflow: Hidden;
}
#text{
 width:200px;  
}

Сценарий:

setTimeout(
function(){
    $('#wrap').animate( // Changed to slide the wrap instead of the #text
        {
            width: ['toggle', 'swing']
        })
    },
1000);

http://jsfiddle.net/RDsqy/2/