Search code examples
jqueryjquery-uitoggleclass

jQuery toggleClass speed not sliding back the same when toggling back

I have the following jquery code to get a div to slide from left to right, but upon clicking again, it instantly goes back to original position (left) without the slide animation. Not sure what I'm doing wrong here.

$('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

HTML:

<style>
    #box{
        position: fixed;
        left:-380px;
    }
    .slideOut{
        position: fixed;
        left:0 !important;
    }
</style>

<div id="box">
    ...
</div>
Solution

  • If you are using jQuery UI, then your code works good, just remove !important from your css.

    JAVASCRIPT

    $('#box').click(function(){
    $(this).toggleClass("slideOut", 500, 'easeInQuad');
});

    CSS

       #box{
        position: fixed;
        left:-380px;
    }
    #box.slideOut{
        left:0;
    }

    https://jsfiddle.net/n72z2ym0/