title: Change jQuery's animation duration during animating
body: <p>Is it possible to change the <code>duration</code> of a currently running jQuery animation between two different values?</p>
  
  <p>I've tried to change the <code>duration</code> via direct assignment, but no success:</p>
  
  <pre><code>var timing = { duration: 4000 };
  $(document).click(function (e) {
    timing.duration = 1000;
  });
  
  $('#foo').animate({top:200, left:200}, timing);
  </code></pre>
  
  <p>...and even, changing the <code>fx.options.duration</code> in <code>step</code>-method does not affect the running animation:</p>
  
  <pre><code>var state = false,
  $(document).click(function (e) {
    state = true;
  });
  
  $('#foo').animate({top:200, left:200}, {
    duration: 4000,
    step: function(now, fx){
      if(state) fx.options.duration = 1000;
      console.log(fx.options.duration); // 1000
    }
  });
  </code></pre>
  
  <p>Here's a <strong><a href="https://jsfiddle.net/5cdwc/" rel="nofollow noreferrer">fiddle</a></strong> to play around.
  Any ideas how this can be done?</p>