jQuery动画幻灯片左侧没有文字环绕答案

【问题标题】：jQuery animation slideLeft without text wrappingjQuery动画幻灯片左侧没有文字环绕
【发布时间】：2011-12-31 05:11:30
【问题描述】：

我想使用 jQuery 从左到右显示/隐藏一段文本。

我正在使用

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

但是我看到该段落随着动画的发生而换行。而且看起来很丑。

有关不良影响的示例，请参阅 this js fiddle。

您如何建议获得相同的效果但没有包装？（比如.slideUp()/slideDown()）...

感谢您的帮助

【问题讨论】：

标签： javascript jquery html animation

【解决方案1】：

你需要在容器上设置overflow: hidden，然后将动画应用到容器上。

Updated fiddle with fix here

【讨论】：

【解决方案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/

【讨论】：