我有一个CSS类，它有left-margin:150px，我只想以动画的方式来运行它。jQuery中的ToggleClass可以工作，但没有任何动画。$(this).toggleClass（“active”，1000，“EaseInOutQuad”）；

我设法使用addClass和RemoveClass动画化了它。但我在想有没有更简单的方法来做这件事。它需要10行代码，而应该有更高效的代码。

有什么想法吗？

null

$(".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>

null