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

这就是 toggleClass() 方法的工作原理：.toggleClass( className )
See the documentation

就是说，如果您想使用此方法为 div 设置动画，则需要像这样处理 CSS3 转换：

$(document).ready(function(){
  $("#slideButton").click(function(){
      $(".box").toggleClass("slideOut");
  });
});

.box{
    width: 380px;
    height: 380px;
    background: red;
    position: fixed;
    left:-380px;
    top: 40px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.slideOut{
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="slideButton">SlideToggle</button>
<div class="box"></div>

Answer 2

如果您正在使用 jQuery UI，那么 您的代码运行良好，只需删除 !important来自你的 css.

JAVASCRIPT

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

CSS

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

https://jsfiddle.net/n72z2ym0/

jQuery toggleClass 切换回时速度不一样

jQuery toggleClass speed not sliding back the same when toggling back

jquery

jquery-ui

toggleclass