Jquery IF ELSE 动画

Question

一直在学习 Jquery 并一直在尝试编写一些代码，当您单击一个按钮时执行动画，而当您再次单击它时执行相反的操作(基本上是每次单击按钮时从右向左移动一个圆圈。相当简单的动画，只是努力使用 Jquery 中的 if/else 语句来实现它)

目前我在:

$(document).on('click', '#sub', function(){
var moved = 0;
if (moved == 0) {
   $('.circle').animate({'margin-left': "300px"});
   moved = 1;
}
else{
    moved = 0;
    $('.circle').animate({'margin-left': "-300px"});
}
});     

所以我试图将 .circle 向右移动 300 像素，它运行 if 语句部分很好，当我将其移动到值 1 时，没有任何反应。我应该使用 while 循环还是应该做些什么不同的事情？

Answer 1

根据您需要支持的浏览器，最好将动画交给 css。单击圆圈并使用 css 转换时简单地切换类。

是这样的:JS

$('.circle').on('click', function() {
  $(this).toggleClass('clicked');
}

CSS

.circle { transition: margin-left 0.2s; margin-left: -300px; }
.circle.clicked { margin-left: 3OOpx; }