Javascript 为什么每次激活jQuery动画都会变长？

我有一个jQuery动画，每次单击对象时它都会旋转。动画目标很简单，单击可在一段时间内将对象旋转360度。然后下次单击时，将其向另一个相反方向旋转360度

我当前的代码在最初的两次点击中似乎做得很好，但是在每次点击之后它开始旋转更多次

我想知道为什么会发生这种情况，如何使用相同的一般方法解决它，最后是关于替代方法的其他建议，以获得更容易的预期效果，但请先回答最初的问题

代码可在以下位置查看：

jQuery部分如下所示：

var settingSpun = false;

$('#foo').on('click',function(){
  if(settingSpun == false){
    settingSpun = true;
    $('#foo').animate({  borderSpacing: -360 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
  },'linear');
  }
  else{
    settingSpun = false;
    $('#foo').animate({  borderSpacing: 360 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
  },'linear');
  }
});

---

使用“取消绑定”，使其仅触发一次：

$('#foo').unbind().on('click',function(){})

---

希望这有助于

使用“解除绑定”，使其仅触发一次：

$('#foo').unbind().on('click',function(){})

---

希望这有帮助

您的代码笔链接已断开…@AlexanderNied应修复代码笔链接。您的代码笔链接已断开…@AlexanderNied应修复代码笔链接。