fadeOut（）の後に行の高さを変更しないようにする

Question

クラス.start_over_buttonと.speed_buttonsの2つの要素があります。 .start_over_buttonはdisplay：noneに設定されています。 CSSと私のjavascriptは、.speed_buttonsがクリックされるとフェードアウトされ、.start_over_buttonがフェードインするようになります。私の問題は、ページ要素の位置を設定するためにブートストラップを使用していて、javascript関数が実行されるときに、 .start_over_buttonと.speed_buttonsは、ページが厄介に跳びます。これは起こらないようにビューポートに関係なく同じ高さにしたいと思っていますが、スタイルシートで高さを同じにしようとすると、影響がないか、同じにすることはできません。私は今週はとても私を許して、コードを勉強し始めている

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

：.jsファイル

.start_over_button{ 
    display: none; 
} 

とここにある：ここで

<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れる：ここでdivがありますこれは非常に無知に見える場合。私はw3schools、stackoverflow、およびapi.jquery.comでこの2日間の解決策を探していました。あなたが提供することができる任意のヘルプの事前に感謝！あなたはすべてのボタンの周りの余分なdiv要素を追加し、そのために高さを設定する必要が

Answer 1

display:noneの代わりにvisibility:hiddenを使用できます。これは、DOMから削除されるのとは異なり、技術的にはまだ存在し、スペースが割り当てられていますが、ユーザーには見えないためです。

詳細情報はこちらWhat is the difference between visibility:hidden and display:none?

Answer 2

ので、それはその中に何が起こるかに関係なく変更doesntの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; 
} 

ちょうど調整ボタンの最大サイズが何であっても高さが変わります。