jqueryif-ELSE动画

一直在学习Jquery，并且一直在尝试编写一些代码，当您单击按钮时会制作动画，当您再次单击按钮时会制作相反的动画（基本上每次单击按钮时都会从右向左移动一个圆。这是一个非常简单的动画，只是在Jquery中使用if/else语句努力让它完成）

目前我在：

---

所以我试着移动，向右旋转300px，它运行if语句部分，当我移动到a值1时，什么也不会发生。我应该使用while循环还是应该做些不同的事情？

试试这样的方法。第一次单击时将类添加到元素，第二次单击时将其删除

$(document).on('click', '#sub', function(){

if($('.circle').hasClass("clicked")){
   $('.circle').animate({'margin-left': "300px"});
   $('.circle').removeClass("clicked");
}else{
  $('.circle').animate({'margin-left': "-300px"});
  $('.circle').addClass("clicked");
}

});  

---

每次在if语句之前都将moved设置为0

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

$（文档）。在（'click'，'#sub'，函数（）上{
var moved=0；//您应该更全局地声明您的
moved
var。现在，当触发单击事件时
moved
将始终为
0
，因为它是这样设置的

(function() {
    var moved = 0;

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

现在，它将“保存”click事件范围外的
已移动的
变量的状态

编辑，稍微增加一点代码的简短版本：

(function() {
    var moved = 0;
    $(document).on('click', '#sub', function(){
        $('.circle').animate({
            'margin-left': (moved ? "-300" : 300 ) + "px"
        }, 500, 'swing', function() {
            moved = !moved;
            // or 
            moved = (moved ? 0 : 1);
        });
    });   
})();

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

大概是这样的：
JS

CSS

太棒了。我没有意识到，通过在单击的内部添加该变量，它实际上将值保持在0。感谢帮助！感谢帮助。这个较短的版本非常好。“？”如何在其中发挥作用？它被称为OK great！然后我猜最后的函数只是在执行检查？这是的回调函数当动画完成后。检查动画文档。是的，这样做可能会更好。在这种情况下，我使用if/else的唯一原因是了解它实际如何工作以及应该如何设置。否则，通常添加/删除或切换类将是理想的！
(function() {
    var moved = 0;
    $(document).on('click', '#sub', function(){
        $('.circle').animate({
            'margin-left': (moved ? "-300" : 300 ) + "px"
        }, 500, 'swing', function() {
            moved = !moved;
            // or 
            moved = (moved ? 0 : 1);
        });
    });   
})();

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

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