更改CSS與jquery沒有任何過渡出現

我有兩個按鈕，並希望他們是彼此相鄰。我不得不使用jquery來實現這一點，因爲只要我點擊「Forward」按鈕，然後出現「Previous」按鈕，並且Forward按鈕移動到底部，即使我使用「display：inline-block」。更改CSS與jquery沒有任何過渡出現

它工作正常，但有一個問題。只要jss更改了css，就可以看到按鈕如何「轉移」到其新位置，如您在我的jsfiddle code中看到的那樣。

問題：有沒有方法可以改變這種行爲並讓變化在沒有任何轉換或延遲的情況下可見？

<div id="mydiv_buttons"> 
    <div style="padding:20px;"> 
     <div class="col-md-9"> 
      <table style="margin-left: 500px"> 
       <tr> 
        <td><a class="btn"  id="btn_arrow-prev" >  <p class="button_text"> Previous <i class="fa fa-angle-double-left"></i></p></a></td> 
        <td><a class="btn"  id="btn_arrow-next" >  <p class="button_text"> Forward  <i class="fa fa-angle-double-right"></i></p></a></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div>

CSS

.btn { 
    -moz-user-select: none; 
    border: 1px solid rgba(0, 0, 0, 0); 
    border-radius: 4px; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1.42857; 
    margin-bottom: 0; 
    padding: 6px 12px; 
    text-align: center; 
    vertical-align: middle; 
    white-space: nowrap; 
} 
.btn { 
    background-image: none !important; 
    border: 5px solid #FFFFFF; 
    border-radius: 0; 
    box-shadow: none !important; 
    color: #FFFFFF !important; 
    cursor: pointer; 
    display: inline-block; 
    margin: 0; 
    position: relative; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important; 
    transition: all 0.15s ease 0s; 
    vertical-align: middle; 
} 
.btn, .btn-default, .btn:focus, .btn-default:focus { 
    background-color: #ABBAC3 !important; 
    border-color: #ABBAC3; 
} 

.button_text 
{ 
    margin-top: 7px; 
    font-size: 15px; 
} 

#mydiv_buttons 
{ 
    margin-top: 440px; 
    width:100%; 
    height:20%; 

    border-top: 1px solid #D8D8D8; 
}

的jQuery：

var main = function() 
{ 
    var counter = 1; 
    var m_left = "148px"; 

    if (counter === 1) 
    { 
     $("#btn_arrow-next")   .css("display", "inline-block"); 
     $("#btn_arrow-next")   .css("margin-left", m_left);   

     $("#btn_arrow-prev")   .css("display", "none");   
     $("#btn_fertig_stellen")  .css("display", "none");   
    } 

    $('#btn_arrow-next').click 
    (
     function() 
     { 
      counter = counter + 1; 

      if (counter === 1) 
      { 
       $("#btn_arrow-next")   .css("display", "inline-block");  
       $("#btn_arrow-next")   .css("margin-left", m_left);  

       $("#btn_arrow-prev")   .css("display", "none"); 
       $("#btn_fertig_stellen")  .css("display", "none"); 
      } 
      else if (counter === 2) 
      { 
       $("#btn_arrow-next")   .css("display", "inline-block"); 
       $("#btn_arrow-next")   .css("margin-left","0px"); 
       $("#btn_arrow-prev")   .css("display", "inline-block"); 
      } 

     } 
    ); 

    $('#btn_arrow-prev').click 
    (
     function() 
     { 
      counter = counter - 1; 

      if (counter === 1) 
      { 
       $("#btn_arrow-next")   .css("display", "inline-block"); 
       $("#btn_arrow-next")   .css("margin-left", m_left); 

       $("#btn_arrow-prev")   .css("display", "none"); 
       $("#btn_fertig_stellen")  .css("display", "none"); 
      } 
      else if (counter === 2) 
      { 
       $("#btn_arrow-next")   .css("display", "inline-block"); 
       $("#btn_arrow-next")   .css("margin-left","0px"); 
       $("#btn_arrow-prev")   .css("display", "inline-block"); 
      } 

     } 
    ); 

} 

$(document).ready(main);

https://jsfiddle.net/69802n3f/

來源

2015-10-27 Black