Question

有没有一种方法可以让jQuery在没有内容变形的情况下为div设置动画？

让我的榜样代表我：

在我的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。

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

4 个答案: