如何在jQuery动画完成之前更改它的持续时间？

Question

解释

我正在尝试在完成之前更改jQuery动画的持续时间，因此我在一个函数中编写了动画的代码，其中持续时间是一个变量。当持续时间的变量发生变化并且再次使用按钮调用该函数时，动画会queue: false立即启动。

问题：

当我点击上面提到的按钮时，动画效果会发生变化，但是当它完成时，它会再次启动前一个持续时间。 这是带有代码的fiddle。

var dur;

function foo(){
    $('.content').animate({width: '100%'},
    {
    	duration: dur,
      easing: 'linear',
    	queue: false,
      done: function(){
      	$(this).css({width: '0%'});
        console.log('Prueba');
      }
    })
};

$('.start').click(function(){
    dur = 5 * 1000;
    foo();
});

$('.dur').click(function(){
  	dur = 0.5 * 1000;
  	foo();
});

.content {
  width: 0%;
  height: 20px;
  float: left;
  margin-top: 20px;
  background: #fdcfa2;
  border: 1px solid #b18963;
  color: #b18963;
}

button {
  width: 50%;
  cursor: pointer;
  padding: 15px 0;
  float: left;
  background: #d0fac0;
  border: 1px solid #6f9b5e;
  color: #6f9b5e;
}

button:nth-child(2) {
  background: #fff4a8;
  border: 1px solid #b1a763;
  color: #b1a763;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="start">Start</button>
<button class="dur">Duration to 0.5 s</button>

<div class="content"></div>

Answer 1

问题是第二个动画完成后，第一个动画还没有完成。只需在上一个动画中添加一个stop（），就像这样。

function foo(){
    $('.content').stop();  // stops the previous animation if running
    $('.content').animate({width: '100%'},
    {
        duration: dur,
        easing: 'linear',
        queue: false,
        done: function(){
          $(this).css({width: '0%'});
          console.log('Prueba');
        }
    })
};