JSFiddle - React, Tailwind, and code Playground

by ryan_s

HTML

<div class="animateMe">
</div>

CSS

.animateMe{
    position:relative;
    top:10px;
    left:100px;
    width:100px;
    height:10px;
    background-color:#c9b5b5;
}

JavaScript

$(function(){

    function successFunction(data){
        console.log("successfunction");
        $('div.animateMe').html('Results : ' + data[0].results.length);
    }    
    
    function animateDiv(){
        //As per the documentation, the argument that is passed
        //to the constructor is the newly created deferred object
        var dfd = $.Deferred(function(dfd){
            $('div.animateMe').animate({height:'200px'},2000,dfd.resolve);
        });
        
        return dfd;
    }
    
    function failureFunction(){
        console.log("failureFunction");
    }
    
    $.when(
        $.ajax("http://search.twitter.com/search.json", {
            data: {
                q: 'jquery'
            },
            dataType: 'jsonp'
        }),animateDiv()
    ).then(successFunction,failureFunction);
});