JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<p>text</p>

CSS

p{
    position: relative;
}

JavaScript

var moveText = function(){
    $('p').animate({"top": $('p').position().top + 100});
    return $('p').promise();
};

var makeSauce = function(){
    var d = $.Deferred();
    
    setTimeout(function(){
        d.resolve('sauce');
    }, 1000);
    
    return d.promise();
};

var poachEgg = function(){
    var d = $.Deferred();
    
    setTimeout(function(){
        d.resolve('egg');
    }, 2000);
    
    return d.promise();
};

var makeBreakfast = function(){
    return poachEgg()
    .pipe(function(eggResponse){
        return makeSauce()
            .pipe(function(sauceResponse){
                
                return "We have " + eggResponse + " and " + sauceResponse;
            });
    });
};

makeBreakfast()
    .done(function(response){
        alert(response);
    });

moveText()
.done(function(){
    moveText();
    console.log('done moving');
});