Folding images

Images fold-up when the are hovered!

by meetaaronsilber

HTML

<img src="http://placekitten.com/200/200" class="foldup" />

<img src="http://placekitten.com/150/200" class="foldup" />

JavaScript

function FoldImg(islices) {
    
    var foldupsrc = $('.foldup');
    var folduph = foldupsrc.height();
    var foldupw = foldupsrc.width();
    var foldupbg = foldupsrc.attr('src');
    
    function initSegments() {
        
        /* Create wrapper for Segments */
        foldupsrc.before('<div class="foldwrap"></div>');
        $('.foldwrap').css({"height":folduph,"width":foldupw});
        
        /* Create the basic slices for each image */
        for(i=0; i < islices; i++){
            e = i+1;
            var slicemarkup = $('<div style="background-image:url('+ foldupbg +')"></div>');
            $(".foldwrap").append(slicemarkup.addClass('slice'+e));
        }
        
        foldupsrc.hide(); /* Remove src image */
    };
    
    function styleSegments() {
        $('.foldwrap').each( function() {
            var isegments = $(this).children().size(); /* Find the number of segments */

            $(this).children().each( function(i) {
                $(this).css("height",(1/isegments*100)+"%");
                $(this).css("backgroundPositionY",(-i/isegments*folduph));
            });
        });
    };
    
    initSegments();
    styleSegments();
}

$(document).ready(function(){
    FoldImg(4);
});