javascript - 使用 jquery 更改 css 而不会出现任何过渡

Question

我有两个按钮，希望它们彼此相邻。我不得不使用 jquery 来实现这一点，因为只要我点击“前进”按钮，就会出现“上一个”按钮并且前进按钮移动到底部，即使我使用“显示:内联 block ”。

它工作正常，但有一个问题。一旦 jQuery 更改了 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/

Answer 1

在 CSS 中设置了一个 transition，从 btn 类中移除 transition: all 0.15s ease 0s;。

Fiddle