How to change duration of a jQuery animation before it's completed?
<p><strong>Explanation</strong></p>

<p>I'm trying to change duration of a jQuery animation before it's completed, so I wrote the animation's code inside a function, where the duration is a variable. The animation has <code>queue: false</code> to start immediately when the duration's variable is changed and the function is called again with a button.</p>

<p><a href="https://i.stack.imgur.com/EgB8l.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EgB8l.gif" alt="enter image description here"></a></p>

<p><strong>The problem</strong>:</p>

<p>When I click on the mentioned button the animation durantion changes, but when it finish it starts again with the previous duration.
Here is a <a href="https://jsfiddle.net/arglab/8yqaawdh/5/" rel="nofollow noreferrer"><strong>fiddle</strong></a> with the code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;button class="start"&gt;Start&lt;/button&gt;
&lt;button class="dur"&gt;Duration to 0.5 s&lt;/button&gt;

&lt;div class="content"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>