用jQuery更改css而没有出现任何过渡

我有两个按钮，希望它们彼此相邻。我必须使用jquery来实现这一点，因为即使我使用“ display：inline-block”，只要单击“ Forward”按钮，就会出现“ Previous”按钮，而“ Forward”按钮移到底部。

它工作正常，但是有一个问题。jQuery更改了CSS之后，就可以看到按钮如何“过渡”到其新位置，正如您在我的jsfiddle代码中所看到的那样。

问题：是否有办法更改此行为，并使更改可见而没有任何过渡或延迟？

<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/