JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.min.js"></script>
<div id="div2">
    <div id="inner">
    </div>
</div>

CSS

#div2{   
        position: absolute;
        top: 45%;
        left: 90%;
        margin-top: -50px;
        margin-left: -100px;
        display:inline-block;        
}

#inner {
     background: black;
    display:inline-block;
    min-width:100px;
    min-height:100px;
}

JavaScript

var demoTimeout;
var div2 = $('#div2');
var inner = $('#inner');

inner.jrumble();


div2.live('click', function(){
        clearTimeout(demoTimeout);
        inner.trigger('startRumble');
        demoTimeout = setTimeout(function(){inner.trigger('stopRumble');}, 1500);
        div2.animate({"top": "80%"}, 2000);
        setTimeout(function() {
                div2.css("top","45%");
        }, 3000);

});