JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>

CSS

#foo {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: indigo;
}

JavaScript

var state = false,
    duration = 4000;
$(document).click(function (e) {
    state = true;
    duration = 1000;
});

// $('#foo').animate({top:200, left:200}, duration);

$('#foo').animate({top:200, left:200}, {
    duration: duration,
    step: function(now, fx){
        if(state) fx.options.duration = 1000;
        console.log(fx.options.duration);
    }
});