JSFiddle - React, Tailwind, and code Playground

by Dean Kamali

HTML

<div id="puff"></div>
<ul>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
    <li>discard</li>
</ul>

CSS

#puff {
    cursor:pointer;
    display:none;
    position:absolute;
    height:32px;
    width:32px;
    background: url(http://i.imgur.com/wvPeK.png) no-repeat;
}
ul{padding:0;font-family:arial}
li{
    list-style:none;
    background: #eee;
    border:1px solid #ddd;
    cursor:pointer;
    float:left;
    margin:5px;
    padding:15px;
}

JavaScript

function animatePoof() {
    var bgTop = 0,
        frame = 0,
        frames = 6,
        frameSize = 32,
        frameRate = 80,
        puff = $('#puff');
    var animate = function(){
        if(frame < frames){
            puff.css({
                backgroundPosition: "0 "+bgTop+"px"
            });
            bgTop = bgTop - frameSize;
            frame++;
            setTimeout(animate, frameRate);
        }
    };
    
    animate();
    setTimeout("$('#puff').hide()", frames * frameRate);
}
$(function() {
    $('li').click(function(e) {
        var xOffset = 24;
        var yOffset = 24;
        $(this).fadeOut('fast');
        $('#puff').css({
            left: e.pageX - xOffset + 'px',
            top: e.pageY - yOffset + 'px'
        }).show();
        animatePoof();
    });
});