Question

所以我尝试将一个部分的宽度设置为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"});
        }
        });
        });

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

Answer 1

如果您想在点击'#about'选择器时隐藏内容，为什么不使用$('#introduction').toggle()？

Answer 2

这是一种不同的方法：

＆＃13;

$(function(){
  $('#about').on('click', homeAboutToggle);
  $('#home').on('click', homeAboutToggle);
});

function homeAboutToggle(){
  $('#introduction').toggleClass('active');
  $('#about-me').toggleClass('active');
}

＆＃13;

* {
	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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

Answer 4

这是一个关于预期动画的工作小提琴：fiddle

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"
            });
        }
    });

});

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

4 个答案: