JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="container">
    <img src="http://brettmiley.com/wp-content/themes/dsm-demo/images/bm-sprites.png" />
</div>

CSS

.container {
    width:32px;
    height: 32px;
    display:block;
    overflow:hidden;
    cursor:pointer;

}
img{

}

JavaScript

$('.container').click(function () {
    var imgWidth = 32;
    var numImgs = 10;
    var cont = 0;

    var animation = setInterval(function () {
        var position = -1 * (cont * imgWidth);
        $('.container').find('img').css('margin-left', position);

        cont++;
        if (cont == numImgs) {
            clearInterval(animation);
        }

    }, 50);
    
    
});