Javascript 当节宽度设置为0时隐藏文本

因此，我在尝试将一个部分的宽度设置为0，并让对象内部的所有内容都执行相同的操作时遇到了一些问题。本质上隐藏部分和其中的所有内容。问题是，该部分将更改为0px的宽度，但内部的文本仍会显示，并且有点向侧面推进。是否有任何方法可以使用css或javascript隐藏文本，并在节宽度更改时将其恢复

粘贴到JSFIDLE中的代码：

$（文档）.ready（函数（）{
$（“#关于”）。单击（函数（）{
如果（$（“#关于我”）.css（“宽度”）如果要在单击
“#关于”
选择器时隐藏内容，为什么不直接使用
$（“#简介”）.toggle（）
？
这是一个CSS问题。您需要将
溢出：隐藏；
添加到任何您想要隐藏的内容中，并更改宽度，在这种情况下，
\intro
这里有一种不同的方法：


$（函数（）{
$（'#about'）。在（'click'，homeaabouttoggle'）；
$（“#home”）。在（'click'，home abouttoggle）上；
});
函数homeAboutToggle（）{
$（“#简介”）.toggleClass（'active'）；
$（“#关于我”）.toggleClass（'active'）；
}
*{
保证金：0px 0px；
填充：0px 0px；
字体系列：“开放式SAN”；
}
#容器{
宽度：100vw；
高度：100vh；
溢出：隐藏；
位置：相对位置；
}
.整页{
宽度：100vw；
高度：100vh；
背景色：#5085aa；
位置：绝对位置；
浮动：左；
过渡：全部缓进缓出400ms；
-webkit过渡：所有轻松输入输出400ms；
}
.整页，对{
转化：translateX（100vw）；
-webkit转换：translateX（100vw）；
}
.整页.左{
转换：translateX（-100vw）；
-webkit转换：translateX（-100vw）；
}
。整页。活动{
过渡：全部缓进缓出400ms；
-webkit过渡：所有轻松输入输出400ms；
变换：translateX（0）；
-webkit转换：translateX（0）；
}
#导言{
z指数：1；
}
#关于我{
z指数：0；
}
#信息{
文本对齐：居中；
}
#介绍{
字体大小：4vw；
颜色：白色；
文本对齐：居中；
填充顶部：30vh；
}
#港口{
位置：绝对位置；
右：3vw；
底部：5vh；
颜色：白色；
字体大小：1.5vw；
文字装饰：无；
字体大小：粗体；
}
#家，
#关于{
位置：绝对位置；
左：3vw；
底部：5vh；
颜色：白色；
字体大小：1.5vw；
文字装饰：无；
字体大小：粗体；
}
#关于：关于我{
宽度：100vw；
}
.大{
字体大小：8vw；
颜色：浅蓝色；
}

关于我
回家
你好，我的名字叫迈克尔！
文件夹
关于我
这里是一个与预期动画一起工作的小提琴：

CSS:

jQuery

$(document).ready(function () {
    $("#about").click(function () {
        if ($("#about-me").css("width") <= "0px") {
            $("#introduction").animate({
                width: "0px"
            }, 500, function () {
                $("#introduction").css("visibility", "hidden");
            })
        } else {
            $("#introduction").animate({
                width: "0px"
            });
        }
    });

});

$（文档）.ready（函数（）{
$（“#关于”）。单击（函数（）{
如果（$（“#关于我”）.css（“宽度”）工作得很好！感谢您的帮助！
#introduction {
    z-index: 1;
    visibility:"visible";
    overflow:hidden;
}

$(document).ready(function () {
    $("#about").click(function () {
        if ($("#about-me").css("width") <= "0px") {
            $("#introduction").animate({
                width: "0px"
            }, 500, function () {
                $("#introduction").css("visibility", "hidden");
            })
        } else {
            $("#introduction").animate({
                width: "0px"
            });
        }
    });

});