JSFiddle - React, Tailwind, and code Playground

by jannis

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
<button>Run this!</button>
<div class="foo">Foo-01</div>
<div class="foo">Foo-02</div>
<div class="foo">Foo-03</div>
<div class="foo hidden">Foo-04</div>

CSS

.foo {
    height: 50px;
    width: 50px;
    border: 1px solid #000;
    margin: 10px;
    
    font: 13px/50px "Helvetica Neue", Arial, Helvetica, Calibri, sans-serif;
    text-align: center;
    
    color: #333;
    background-color: #eee;
}
.hidden { display: none; }

JavaScript

var cache = $('.foo'); // this will only be created once per page.

$('button').one('click', function() {

    cache.filter(':hidden') // only get the hidden one
    .animate({
        'opacity': 'show',
        'background-color': 'green'
    }, {
        duration: 1000,
        queue: false
    }).end() // reset to animate ALL elements
    .animate({
        'height': '100px',
        'width': '100px',
        'color': '#fff',
        'background-color': 'red'
    }, {
        duration: 2000,
        queue: true
    });

    cache.filter('.hidden') // only get the one with class .hidden
    .animate({
        'background-color': 'green',
        'color': '#000'
    }, {
        duration: 1000,
        queue: true
    });

});