切换回来时，jQuery的toggleClass速度不会以相同的速度滑回

Question

我有以下 jquery 代码来让 div 从左向右滑动，但是再次单击时，它会立即返回到原始位置(左)，而没有幻灯片动画。不确定我在这里做错了什么。

$('#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>

Answer 1

如果您使用的是 jQuery UI，那么您的代码运行良好，只需从 css 中删除 !important 即可。

JAVASCRIPT

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

CSS

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

<强> https://jsfiddle.net/n72z2ym0/