multi animate() stop() test

multi animate() stop() test. should always complete all animations (in this case return to start).

by Laurens Maneschijn

HTML

<button id="b0">stop</button><br>
<button id="b1">go1</button>
<button id="b2">stop, go1</button><br>
<button id="b3">go2</button>
<button id="b4">stop, go2</button><br>
<button id="b5">go3</button>
<button id="b6">stop, go3</button><br>
<div id="d">d</div>
<div id="e">e</div>
<div id="f">f</div>
<div id="g">g</div>
stop : jump to end of all animations, including nested animations (set in oncomplete function of previous animation).<br>
go1 : start multiple animates on single element (d).<br>
go2 : start multiple animates on single element (e), the next generated on completion of the first.<br>
go3 : start multiple animates on multiple elements (f, g), the next generated on completion of the first.<br>
stop, go# : first stop all animations, and then start again.<br>
<hr>
multi animate() stop() tests. should always complete all animations (in this case return to start).<br>

CSS

#d,#e,#f,#g{
    position:absolute;
    padding:10px;
    top:220px;
}
#d{
    left:100px;
    background-color:#f0f;
}
#e{
    left:200px;
    background-color:#88f;
}
#f{
    left:300px;
    background-color:#0f0;
}
#g{
    left:400px;
    background-color:#f00;
}

JavaScript

$(function(){
    $('#b0').click(function(){stop();});
    $('#b1').click(function(){go1();});
    $('#b2').click(function(){stop();go1();});
    $('#b3').click(function(){go2();});
    $('#b4').click(function(){stop();go2();});
    $('#b5').click(function(){go3();});
    $('#b6').click(function(){stop();go3();});
});

function stop(){
    while($(':animated').length){
        $(':animated').stop(false,true);
        // NB: stop(true,true) only completes the FIRST animation in queue
    }
}
function go1(){
    $('#d')
        .animate({'left':'+=100px'}, 300)
        .animate({'top' :'+=100px'}, 300)
        .animate({'left':'-=100px'}, 300)
        .animate({'top' :'-=100px'}, 300)
    ;
}
function go2(){
    $('#e').animate({'left':'+=100px'}, 300, function () {
        console.log(1);
        $('#e').animate({'top':'+=100px'}, 300, function () {
            console.log(2);
            $('#e').animate({'left':'-=100px'}, 300, function () {
                console.log(3);
                $('#e').animate({'top':'-=100px'}, 300, function () {
                    console.log(4);
                });
            });
        });
    });
}
function go3(){
    $('#f').animate({'left':'+=100px'}, 300, function () {
        console.log(1);
        $('#g').animate({'top':'+=100px'}, 300, function () {
            console.log(2);
            $('#f').animate({'left':'-=100px'}, 300, function () {
                console.log(3);
                $('#g').animate({'top':'-=100px'}, 300, function () {
                    console.log(4);
                });
            });
        });
    });
}
/*
see: 
https://api.jquery.com/animate/
https://api.jquery.com/stop/
https://api.jquery.com/animated-selector/

$.stop()  : " Callback functions are not called." 
however:
"If the jumpToEnd argument is provided with a value of true, the current animation stops, but the element is immediately given its target values for each CSS property. [...] The callback function is then immediately...