Question

我有两个按钮，希望它们彼此相邻。我不得不使用jquery来实现这一点，因为只要我点击“前进”按钮，就会出现“上一页”按钮，前进按钮会移动到底部，即使我使用“display：inline-block”。 / p>

它工作正常，但有一个问题。只要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/

Answer 1

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

Fiddle

Answer 2

因css而出现过渡。

删除以下css

.btn {transition: all 0.15s ease 0s;}

演示：https://jsfiddle.net/69802n3f/3/

使用jquery更改css而不显示任何转换

2 个答案: