jquery - jQuery - 在不变形内容的情况下为 div 设置动画

Question

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 中的字符串保持在自己的行上，而不像换行那样换行。

提前致谢。

Answer 1

只需添加white-space: nowrap;到#div_3B（您已经添加overflow: hidden;）：

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

Answer 2

这是演示

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

      white-space: nowrap;

我希望你想实现这一目标。

Answer 3

改变你的

元素样式到此

<p style="white-space: nowrap;">I don't want this strings to deform</p>

Answer 4

解决方案的问题white-space: nowrap是它会影响 div 的化妆。我建议用新的 div 包装内容并为其设置固定宽度（使用$("#div_3B").width()）。另外，您需要添加overflow: hidden到#div_3B. 它可以在resizedivs函数内部完成。当动画完成时，您可以清理额外的 div。