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'); } }) };
Comments
Post a Comment