Color Animations Show Hide

by TheFiddler

HTML

<div id="0" style="background:red;width:100px;height:100px;display:none;"></div>
<div id="1" style="background:green;width:100px;height:100px;display:none;"></div>

JavaScript

var stopAnim = false;

var idx = 0;
var stopped;
$('div').click(function () {
    if (!stopAnim) {
        stopAnim = true;

        stopped = idx;

    } else {
        console.log("ELSE " + idx);
        if (idx == 1) {
            $("div#0").hide();
            $("div#1").show();
            idx = 0;
        } else {
            $("div#1").hide();
            $("div#0").show();
            idx = 1;
            //console.log("idx 0 " + idx);
        }
    }
});

function doReplay(idxarg) {

    if (!stopAnim) {

        $("div#" + idx)
            .delay(1000)
            .fadeIn(200)
            .delay(1000)
            .fadeOut(200, function () {
            idx = (idxarg + 1) % 2;
            doReplay(idx);
        });
    } else {
        $("div#" + stopped).show();
        return false;
    }
}
doReplay(0);