JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<select id="effect">
</select>
    <div id="test">
    <h3 class="ui-widget-header ui-corner-all">TEST</h3>
    <p>
        Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
</div>

CSS

#test { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;}
#test h3 { margin: 0; padding: 0.4em; text-align: center; }

JavaScript

$(function() {
    var effects = ["blind", "bounce", "clip", "drop", "explode", "fade", "fold", "highlight", "pulsate", "puff", "scale", "size", "shake", "slide"],
        effectSelector = $("#effect");
    
    $.each(effects, function( i, effect ) {
        $("<option value='"+effect+"'>"+effect+"</option>").appendTo(effectSelector);
    });
    
    var effect = effects[0];
    effectSelector.change(function() {
        effect = effectSelector.val();
    });
    
    $("#test").click(function() {
        $(this).toggle(effect, function() {
            setTimeout(function() {
                $(this).toggle(effect);
            }, 500);
        });
    });
});