jQuery + UI Edge Template

by mpetrovich

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<img id="good" src="http://www.tigerhostel.com/upload/site/rooms/24.jpg" alt="">
<!--
<div id="bad1" style="width:500px; height:333px; background:url(http://www.tigerhostel.com/upload/site/rooms/24.jpg) no-repeat;"></div>
<img id="bad" src="http://www.tigerhostel.com/upload/site/rooms/24.jpg" alt="">
-->

JavaScript

// Incorrect clipping
$("#bad1").click(function() {
    $(this).toggle("clip", {
        direction: "horizontal",
        duration: 3000
    });
});
 
// Correct clipping
$.fn.clip = function() {
    var $this = $(this);
    var $wrapper = $("<div class='wrapper' />");
    $this.wrap($wrapper);
    $wrapper.css({
        position: "relative",
        width: $this.width(),
        height: $this.height()
    });
    $this.css("position", "absolute");
    $wrapper
        .animate({
            left: $this.width() / 2,
            width: 0
        }, "slow");
};

$("#good").click(function() {
    $(this).clip();
});