Change css with jquery without any transition appearing

Question

I have two buttons and want them to be next to each other. I had to use jquery to achieve this, because as soon as i clicked the "Forward" button, then the "Previous" button appeared and the Forward button moved to the bottom, even though i use "display:inline-block".

It works fine, but there is one problem. As soon as the css is changed by jQuery, it is possible to see how the buttons "transit" to their new positions, as you can see in my jsfiddle code.

Question: Is there a way to change this behaviour and let the change be visible without any transition or delay?

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

Rudie Visser · Accepted Answer · 2015-10-27 13:57:54Z

2

A transition was set in the CSS, remove transition: all 0.15s ease 0s; from the btn class.

Fiddle

edited Oct 27, 2015 at 13:57

answered Oct 27, 2015 at 12:09

Rudie Visser

5806 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Black Over a year ago

Thank you very much. This is what happens when you just copy & paste without checking the code and learning what it does... lesson learned, thx!

ItzMe_Ezhil · Accepted Answer · 2015-10-27 12:11:27Z

1

transition appearing because of css.

Remove below css

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

Demo :https://jsfiddle.net/69802n3f/3/

answered Oct 27, 2015 at 12:11

ItzMe_Ezhil

1,4562 gold badges12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Change css with jquery without any transition appearing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related