javascript - How to change duration of a jQuery animation before it's completed? -

explanation

i'm trying change duration of jquery animation before it's completed, wrote animation's code inside function, duration variable. animation has queue: false start when duration's variable changed , function called again button.

the problem:

when click on mentioned button animation durantion changes, when finish starts again previous duration. here fiddle 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();  });

.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 0.5 s</button>    <div class="content"></div>

the problem after second animation has finished running, first animation hasn't yet completed. add stop() previous animation, this.

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