Looking at your fiddle, the issue isn’t with the .stop()
, it’s with the .animate
, specifically the callback:
function upDown() {
for (var i = 1; i <= QTY_TARGETS; i++) {
...
wrap.animate({ 'top': '' + moveTop + 'px' }, {
duration: duration,
complete: function () {
wrap.animate({ top: '' + moveTopRepeat + '' },
{
duration: duration,
// this line here
complete: upDown
});
}
});
}
}
The complete:upDown
restarts upDown, but is called form within every target and calls the outer upDownAll.
Separate upDown to upDownAll and an inner upDownTarget then on the individual target complete reset just for that target:
function upDown() {
for (var i = 1; i <= QTY_TARGETS; i++) {
upDownTarget(i)
}
}
function upDownTarget(i)
{
...
wrap.animate({ 'top': '' + moveTop + 'px' }, {
duration: duration,
complete: function () {
wrap.animate({ top: '' + moveTopRepeat + '' },
{
duration: duration,
// only restart this one target
complete: function() { upDownTarget(i) }
});
}
});
}
Updated fiddle: https://jsfiddle.net/29hntbve/
As an extra, you also might like to stop the animations when the player loses:
res.text('You lose');
$(".wrap").stop();