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

Hiding a text when a sections width is set to 0

本文关键字：隐藏 文本 设置      更新时间：2023-09-26

所以我在尝试将部分的宽度设置为 0 并让对象内的所有内容都做同样的事情时遇到了一些问题。基本上隐藏该部分及其中的所有内容。问题是，该部分将更改为 0px 的宽度，但里面的文本仍然显示并且还会推到一边。有什么方法可以使用 css 或 javascript 来隐藏文本并在部分宽度更改时将其恢复？

粘贴到 jsfiddle 中的代码：http://jsfiddle.net/t6ck9ajb/

$(document).ready(function(){
        $("#about").click(function(){
        if ($("#about-me").css("width") <= "0vw") {
            $("#introduction").animate({width:"0vw"}, 500);
            /*$("#intro").css("display","none");
            $("#port").css("display","none");
            $("#about").css("display","none"); */
        }
        else {
            $("#introduction").animate({width:"0vw"});
        }
        });
        });

这就是我必须尝试隐藏文本的内容，但这并没有真正隐藏它。

这是一种不同的方法：

$(function(){
  $('#about').on('click', homeAboutToggle);
  $('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
  $('#introduction').toggleClass('active');
  $('#about-me').toggleClass('active');
}
* {
	margin: 0px 0px;
	padding: 0px 0px;
	font-family: "Open Sans";
}
#container{
    width: 100vw;
	height: 100vh;
    overflow:hidden;
    position:relative;
}
.full-page {
	width: 100vw;
	height: 100vh;
	background-color: #5085aa;
	position: absolute;
	float: left;
            transition:all ease-in-out 400ms;
    -webkit-transition:all ease-in-out 400ms;    
}
.full-page.right{
            transform: translateX(100vw);
    -webkit-transform: translateX(100vw);
}
.full-page.left{
            transform: translateX(-100vw);
    -webkit-transform: translateX(-100vw);
}
.full-page.active{
            transition:all ease-in-out 400ms;
    -webkit-transition:all ease-in-out 400ms;    
            transform: translateX(0);
    -webkit-transform: translateX(0);
}
#introduction {
	z-index: 1;
}
#about-me {
	z-index: 0;
}
#information {
	text-align: center;
}
#intro {
	font-size: 4vw;
	color: white;
	text-align: center;
	padding-top: 30vh;
	
}
#port{
	position: absolute;
	right: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}
#home,
#about{
	position: absolute;
	left: 3vw;
	bottom: 5vh;
	color: white;
	font-size: 1.5vw;
	text-decoration: none;
	font-weight: bold;
}
#about:active  #about-me {
	width: 100vw;
}
.big {
	font-size: 8vw;
	color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
	<section class="full-page right" id="about-me">
		<h1 id="information">About Me</h1>
		<a id="home">Back home</a>		
	</section>
	<section class="full-page left active" id="introduction">
		<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span>  </h1>
		<a id="port">Portfolio</a>
		<a id="about">About Me</a>
	</section>
    </div>
</body>

如果您想在

单击'#about'选择器时隐藏内容，为什么不直接使用 $('#introduction').toggle() ？

这是一个

CSS问题。您需要通过更改宽度将overflow: hidden;添加到要隐藏的任何内容中，在本例中为 #intro .

这里有一个与预期动画一起工作的小提琴：小提琴

.CSS：

#introduction {
    z-index: 1;
    visibility:"visible";
    overflow:hidden;
}

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"
            });
        }
    });
});
相关文章：