0

当我通过将宽度从 0 更改为 0 以上的任何值（通过使用 jquery）来显示段落时，我的网站会创建所有这些没有内容的可滚动区域。

我用了一个平滑过渡，让段落的宽度越来越小，直到消失，然而，在完全消失前的最后一刻，段落的所有单词都变成了一大列单词；当它最终消失时，我留下了一个大的可滚动区域，里面什么都没有。

我无法删除这个无用的空间，有什么办法可以解决这个问题吗？

我只想知道我应该在我的 css 文件或我的 jquery 文件中添加什么，以避免这个无用的空间破坏我的网站。

这是代码：

html:

<article id="abms">
            <p>
                Mauris vulputate lorem ac nibh rhoncus, eu mattis lorem mattis. Maecenas metus dui, rhoncus eget erat quis, vehicula luctus justo. Aenean vel porta est, tristique mollis metus. Mauris gravida diam sit amet tellus pellentesque hendrerit. Maecenas ut suscipit metus. Nunc vel volutpat est, porta sodales nibh. Pellentesque varius ac massa nec varius.
                Mauris vulputate lorem ac nibh rhoncus, eu mattis lorem mattis. Maecenas metus dui, rhoncus eget erat quis, vehicula luctus justo. Aenean vel porta est, tristique mollis metus. Mauris gravida diam sit amet tellus pellentesque hendrerit. Maecenas ut suscipit metus. Nunc vel volutpat est, porta sodales nibh. Pellentesque varius ac massa nec varius.
            </p>
        </article>

CSS：

#abms
    {
        overflow: hidden;
        width:0px;
        text-align: justify;
        text-indent: 60px;
        background: rgba(255,255,255,0.2);
        margin: 0% 2% 2% 2%;
        border-radius: 1em;
    }

jQuery：

$(document).on("ready",inicio);

function inicio()
    {
        $("#Alb").on("click",mov1);
        $("#Nos").on("click",mov2);
        $("#Us").fadeIn("slow");
        $("#hfi").fadeIn("slow");
    };

function mov1()
    {
        var hide =
            {
                margin:0,
                padding:0,
                overflow:"hidden",
                width:0
            };
        var show =
            {
                width:"42%",
                overflow:"visible",
                padding: "0% 1% 0% 1%"
            };

        $("#Us").css(hide);
        $("#abms").css(show);
    }

function mov2 ()
    {
        var hide =
            {
                margin:0,
                padding:0,
                overflow:"hidden",
                width:0
            };
        var show =
            {
                overflow:"visible",
                margin: "0% 2% 2% 2%",
                padding: "0.05% 2% 0.05% 2%",
                width:"40%"
            };
        $("#abms").css(hide);
        $("#Us").css(show);
    }

我没有放完整的代码，因为它不需要。

4

0 回答 0