當截面寬度設置爲0時隱藏文字

所以我試圖將截面的寬度設置爲0並讓對象內的所有內容都做同樣的事情時遇到了一些問題。基本上隱藏它的部分和一切。事情是，該部分將改變爲0px的寬度，但裏面的文本仍然顯示，也有點推到一邊。有什麼方法可以使用css或javascript來隱藏文本，並在切片寬度重新改變時將其帶回。當截面寬度設置爲0時隱藏文字

代碼粘貼到的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"}); 
     } 
     }); 
     });

這是我在隱藏文本嘗試，但是這並沒有真正將其隱藏。

來源

2015-01-20 purplecracka

這是一種不同的方法：

$(function(){ 
 
    $('#about').on('click', homeAboutToggle); 
 
    $('#home').on('click', homeAboutToggle); 
 
}); 
 

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

* { 
 
\t margin: 0px 0px; 
 
\t padding: 0px 0px; 
 
\t font-family: "Open Sans"; 
 
} 
 

 
#container{ 
 
    width: 100vw; 
 
\t height: 100vh; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 

 
.full-page { 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-color: #5085aa; 
 
\t position: absolute; 
 
\t 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 { 
 
\t z-index: 1; 
 
} 
 

 
#about-me { 
 

 
\t z-index: 0; 
 
} 
 

 
#information { 
 
\t text-align: center; 
 
} 
 

 
#intro { 
 
\t font-size: 4vw; 
 
\t color: white; 
 
\t text-align: center; 
 
\t padding-top: 30vh; 
 
\t 
 
} 
 

 
#port{ 
 
\t position: absolute; 
 
\t right: 3vw; 
 
\t bottom: 5vh; 
 
\t color: white; 
 
\t font-size: 1.5vw; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
} 
 

 
#home, 
 
#about{ 
 
\t position: absolute; 
 
\t left: 3vw; 
 
\t bottom: 5vh; 
 
\t color: white; 
 
\t font-size: 1.5vw; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
} 
 

 
#about:active #about-me { 
 
\t width: 100vw; 
 
} 
 

 
.big { 
 
\t font-size: 8vw; 
 
\t color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="container"> 
 
\t <section class="full-page right" id="about-me"> 
 
\t \t <h1 id="information">About Me</h1> 
 
\t \t <a id="home">Back home</a> \t \t 
 
\t </section> 
 
\t <section class="full-page left active" id="introduction"> 
 
\t \t <h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1> 
 
\t \t <a id="port">Portfolio</a> 
 
\t \t <a id="about">About Me</a> 
 
\t </section> 
 
    </div> 
 
</body>

來源

2015-01-20 22:01:05

完美地工作！謝謝您的幫助！ – purplecracka 2015-01-20 22:59:46

如果您想在單擊'#about'選擇器時隱藏內容，爲什麼不直接使用$('#introduction').toggle()？

來源

2015-01-20 21:37:20 Daryl

這是一個CSS問題。您需要將overflow: hidden;添加到任何想要隱藏的寬度變化中，在此例中爲#intro。

來源

2015-01-20 21:38:37

這裏工作撥弄預期的動畫：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" 
      }); 
     } 
    }); 

});

來源

2015-01-20 22:22:16 Michelangelo

當截面寬度設置爲0時隱藏文字

回答

相關問題