JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<div class="image1">
    <img class="clip" src="http://www.astralissolutions.com/images/circle.png" />
    <div class="top fill"></div>
    <div class="left fill"></div>
    <div class="right fill"></div>
    <div class="bottom fill"></div>
</div>

CSS

.image1 {
    background-image: url(http://www.moxywebworks.com/weblog/wp-content/uploads/2009/05/wordpress-300x300.jpg)
}
.image2 {
    background-image: url(http://www.rebron.org/wordpress/wp-content/uploads/2009/07/Thunderbird-300x300.jpg)
}
body > div {
    background-position: center;
    width: 300px;
    height: 300px;
    position: relative;
}
img.clip {
    width: 100%;
    height: 100%;
    position: absolute;
}
div.fill {
    position: absolute;
    background-color: White;
}
div.left, div.right {
    top: 0;
    height: 100%;
    width: 0
}
div.left {
    left: 0;
}
div.right {
    right: 0;
}
div.top, div.bottom {
    width: 100%;
    left: 0;
    height: 0
}
div.top {
    top: 0;
}
div.bottom {
    bottom: 0;
}

JavaScript

var speed = 1000;

var adjust = ($.browser.msie && parseInt($.browser.version) <= 8) || $.browser.webkit ? 2 : 0;

$clip = $("img.clip");

$clip.animate({
    top: $clip.parent().height() / 2,
    left: $clip.parent().width() / 2,
    width: 0,
    height: 0
}, {
    duration: speed,
    step: function (now, fx) {
        switch (fx.prop) {
            case "top":
                $("div.top").css("height", now);
                $("div.bottom").css("height", now + adjust);
                break;
            case "left":
                $("div.left").css("width", now);
                $("div.right").css("width", now + adjust);
        }
    },
    complete: function () {
        $(this).parent().addClass("image2");

        $(this).animate({
            top: 0,
            left: 0,
            width: $(this).parent().width(),
            height: $(this).parent().height()
        }, {
            duration: speed,
            step: function (now, fx) {
                switch (fx.prop) {
                    case "top":
                        $("div.top").css("height", now);
                        $("div.bottom").css("height", now + adjust);
                        break;
                    case "left":
                        $("div.left").css("width", now);
                        $("div.right").css("width", now + adjust);
                }
            },
            complete: function () {
                $("div > div, img").removeAttr("style");
            }
        });
    }
});