JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
     height: 50px;
     width: 50px;
     float: left;
     margin-right: 10px;
     display: none;
     background-color: #090;
 }
 p {
     font-size: 12px;
     transition: font-size: 1s;
 }
 p:hover {
     transition: font-size 0.5s;
     font-size: 20px;
 }

JavaScript

var effect = function () {
    var d;
    return $.ajax({
        url: 'http://developer.trimet.org/ws/V1/arrivals/locIDs/2580/appID/5E48DCD7031297B7CBF2F37FD?json=true',
        success: function (data) {
            var arr = data.resultSet.arrival;
            d = data.resultSet.arrival;
            $(arr).each(function (i) {
                $('body').delay(1000 * i).append($('<p>' + d[i] + '</p>').val(i));
            });

        },
        complete: function () {
            $('p').hide().append(JSON.stringify(d)).fadeIn(1000, function () {
                $(this).fadeOut(2000);
            });
        }

    });
};
$("button").on("click", function () {
    $("p").append(" Started... ");
    $.when(effect()).done(function () {
        alert('sdf');
        $("p").delay(500).fadeIn(1000);
    });
});