Question

我有一个具有left-margin: 150px的CSS类，我只想以动画方式运行它。 jQuery中的ToggleClass可以运行，但是没有任何动画。 $(this).toggleClass("active", 1000, "easeInOutQuad");

我设法使用addClass和removeClass对其进行了动画处理。但是我想知道是否有更简单的方法可以做到这一点。它需要10行代码，而效率应该更高。

有什么想法吗？

$(".box").on('click tap', function() {
if($(this).hasClass('active')){
      $(this).animate({
        marginLeft: "-=150px",
      }, 500, function() {
        $(this).removeClass('active');
      });    
}else{
      $(this).animate({
        marginLeft: "+=150px",
      }, 500, function() {
        $(this).addClass('active');
      });    
}
});


// $(this).toggleClass("active", 1000, "easeInOutQuad");

.box{
width: 100px;
height: 100px;
background-color: red;
}

.active{
margin-left: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"> BOX </div>

Answer 1

我会用CSS transition来做。将transition: margin-left 0.5s;（或类似名称）添加到您的.box样式规则中：

$(".box").on('click tap', function() {
    $(this).toggleClass('active');
});

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: margin-left 0.5s; /* <== */
}

.active {
    margin-left: 150px;
}

<div class="box"> BOX </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

寻找一种有效的方法来切换类动画

1 个答案: