JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.js"></script>
<div class="tinytime">
</div>
<div class="gasfitter">
</div>
<div class="passinggrade">
</div>
<div class="abcplus">
</div>

CSS

div {
    background: #333;
    float: left;
    height: 100px;
    margin: 10px 0 0 10px;
    width: 100px;     
}

JavaScript

var rumbleElements = $('.tinytime, .gasfitter, .passinggrade, .abcplus');

rumbleElements.jrumble({
    x: 2,
    y: 2,
    rotation: 1,
    speed: 0
});

var demoTimeout = {};
rumbleElements.each(function(){
    demoTimeout['timeout'+$(this).index('div')] = '';
});
 console.log(demoTimeout);

rumbleElements.mouseenter(function(){    
    $this = $(this);
    var thisIndex = $this.index('div');    
    clearTimeout(demoTimeout['timeout'+thisIndex]);
    $this.trigger('startRumble');
    demoTimeout['timeout'+thisIndex] = setTimeout(function(){$this.trigger('stopRumble');}, 200);
    console.log(demoTimeout['timeout'+thisIndex]);
    console.log(demoTimeout);
    
});