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

只要调整无论是最大的按钮尺寸的高度，你应该很好去。