JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<div id="wrapper">
    <img id="rocket" src="http://www.kidostore.com/images/uploads/P-SAM-rocket-blk.jpg" width="310" height="310" />
</div>

<span id="resetlink">Reset</span>

CSS

#wrapper {
    position: absolute;
    top: 250px;
}
#resetlink {
    position: absolute;
    left: 420px;
    top: 30px;
}

JavaScript

var timerRocket;

$("#resetlink").click(function(){
    clearInterval(timerRocket);
    $("#wrapper").css('top', '250px');
    $('.throbber, .morpher').remove();
    $("#rocket").show();
});

$("#rocket").click(function() {
    $(this).imageMorph('http://rlv.zcache.com/retro_space_rocket_photosculpture-p1534491740955465383s98_400.jpg', 400, 400);
    
    timerRocket = setInterval(function() {
        curTop = parseInt($('#wrapper').css('top'), 10);
        newTop = curTop - 5;
        $("#wrapper").css('top', newTop + 'px');
    }, 20);
});

$.fn.imageMorph = (function(src, width, height, callback) {
    var SPEED = 1000;
    return this.each(function() {

        var img = $(this),
            newImg = $('<img>'),
            throbber = img.parent().find('.throbber');


        if (!throbber.length) {
            throbber = $('<span class="throbber"></span>');
            img.parent().append(throbber);
            throbber.hide();
        }


        var throbberTimeout = setTimeout(function() {
            // if the image is cached, it will load instantly, so we don't want the throbber
            // flickering on and off in that case
            throbber.show();
        }, 60);

        newImg.css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: img.width() + 'px',
            height: img.height() + 'px',
            opacity: 0,
            cursor: 'pointer'
        }).addClass('morpher');
        img.parent().append(newImg).css({
            width: img.width() + 'px',
            height: img.height() + 'px'
        });


        newImg.load(function() {
            var orig = {
                width: img.width(),
                height: img.height()
            };
            var css = {
                width: width + 'px',
                height: height + 'px',
                opacity: 1
            };
            img.parent().stop().animate(css, SPEED);
            img.stop().animate(css, SPEED);
           ...