fadeout（）

Question

後保持行高不變因此，我有兩個元素類.start_over_button和.speed_buttons。 .start_over_button設置爲display：none;在CSS和我的JavaScript使它，所以當.speed_buttons點擊他們淡出和.start_over_button淡入英寸我的問題是，我使用bootstrap來定位我的頁面元素，當javascript函數運行時，由於不同的高度.start_over_button和.speed_buttons，頁面跳轉煩人。無論視口如何都不會發生這種情況，我希望使高度相同，但是當我嘗試在樣式表中設置相同高度時，它不會產生任何影響，也不會使其相等。這裏是div：

<div class="row thirdRow"> 
     <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")--> 
     <a class="start_over_button" href="index.html"> 
      <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4"> 
        <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> 
        Start Over 
      </button> 
     </a> 
     <div class="speed_buttons"> 
      <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3"> 
       <input id="slow" class="difficulty" type="radio" name="user_options" value="300"> 
        Slow 
        <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
      </label> 
      <label id="medText" class="radio-inline col-xs-2"> 
       <input id="med" class="difficulty" type="radio" name="user_options" value="150"> 
        Med 
        <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> 
      </label> 
      <label id="fastText" class="radio-inline col-xs-2"> 
       <input id="fast" class="difficulty" type="radio" name="user_options" value="75"> 
        Fast 
        <span class="glyphicon glyphicon-flash" aria-hidden="true"></span> 
      </label> 
     </div> 
    </div> 

這裏是CSS：

.start_over_button{ 
    display: none; 
} 

而這裏的.js：

$(".speed_buttons").fadeOut(0, function(){ 
     $(".start_over_button").fadeIn(0); 
    }); 

我只有這個星期開始學習代碼所以請原諒我如果這看起來非常無知。在過去的兩天裏，我一直在爲w3schools，stackoverflow和api.jquery.com尋找解決方案。預先感謝您提供的任何幫助！

Answer 1

您可以使用visibility:hidden而不是display:none。這是因爲不同於從DOM中刪除，它在技術上仍然存在，並且已經分配了空間，但是它對用戶是不可見的。

更多的信息在這裏：What is the difference between visibility:hidden and display:none?

Answer 2

您需要添加額外的div周圍所有的按鈕和設置高度爲該div所以它並沒有改變，不管它裏面發生了什麼：

<div class="row thirdRow"> 
    <div class="buttons-container">   
    <!-- here I use some simple js to make my button reload the page. I should try to migrate this to my script.js file (href="javascript:location.reload(true)")--> 
    <a class="start_over_button" href="index.html"> 
     <button type="button" class="btn btn-default btn-lg col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4"> 
       <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> 
       Start Over 
     </button> 
    </a> 
    <div class="speed_buttons"> 
     <label id="slowText" class="radio-inline col-xs-2 col-xs-offset-3"> 
      <input id="slow" class="difficulty" type="radio" name="user_options" value="300"> 
       Slow 
       <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
     </label> 
     <label id="medText" class="radio-inline col-xs-2"> 
      <input id="med" class="difficulty" type="radio" name="user_options" value="150"> 
       Med 
       <span class="glyphicon glyphicon-fire" aria-hidden="true"></span> 
     </label> 
     <label id="fastText" class="radio-inline col-xs-2"> 
      <input id="fast" class="difficulty" type="radio" name="user_options" value="75"> 
       Fast 
       <span class="glyphicon glyphicon-flash" aria-hidden="true"></span> 
     </label> 
    </div> 
    </div> 
</div> 

CSS

.buttons-container { 
    height:100px; 
} 

只要調整無論是最大的按鈕尺寸的高度，你應該很好去。