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

Question

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

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

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

该代码可以在以下位置看到：codepen

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');
  }
});

Answer 1

使用取消绑定，因此仅触发一次：

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

希望这会有所帮助