JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="test"></div>
<div id="bTest"></div>

CSS

#test {
    width:100px;
    height:100px;
    border:1px solid red;
    position:fixed;
    left:100px;
    top: 0px;
}
#bTest {
    width:100px;
    height:100px;
    border:1px solid blue;
    position:fixed;
    left:100px;
    top: 200px;
}

JavaScript

/*
var welTest = $('#test');
var testpromise = welTest.animate({
    left: '300px'
}, 1000).promise();
console.log(testpromise);
testpromise.progress(function (value) {
    console.log('Progress!', value);
});

testpromise.done(function () {
    console.log('done');
});

var oBtest = $('#bTest').animate({
    opacity: 1,
    width: 400,
    percent: 100
}, 5000).promise();
oBtest.progress(function (a, p, c) {
    console.log(p);
    $('#bTest').html(100 * p + "%");
});
*/

function wait(timeout) {
    var deferred = $.Deferred();
    setTimeout(deferred.resolve, timeout);
    return deferred.promise();
}

function synchronously(tasks) {
    console.log('synchronously');
    var i, task, func,
    promise = $.Deferred().resolve().promise(), //
        makeRunner = function (func, args) { //
            return function () {
                return func.apply(null, args).promise();
            };
        };
    for (i = 0; i < tasks.length; i++) {
        
        task = tasks[i];
        console.log(task);
        func = task.shift();
        console.log(func);
        promise = promise.then(makeRunner(func, task)); //
        console.log(promise);
    }
    return promise;
}


wait(5000).done(function () {
    console.log('Timeout fired');
    var htpromise = synchronously([
        [$('#bTest').animate, {
            opacity: 0.25
        },
        100],
        [$('#test').animate, {
            opacity: 0.75
        },
        200]
    ]);
});