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/

Answer 2

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

那就是说，如果你想用这种方法为你的div设置动画，你需要像这样处理CSS3过渡：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

jQuery toggleClass在切换回时不会向后滑动

2 个答案: