$(document).ready(function () {

    var image = $(".flip").find("img.flip-front")[0];
    var margin = $(image).width() / 2;
    var height = $(image).height();
    var width = $(image).width();

    $(".flip img.flip-back").each(function () {
        $(this).stop().css({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' });
    });

    $(".flip").hover(function () {
        var image1 = $(this).find("img.flip-front")[0];
        var image2 = $(this).find("img.flip-back")[0];
        $(image1).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 200 });
        window.setTimeout(function () {
            $(image2).stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 200 });
        }, 200);
    }, function () {
        var image1 = $(this).find("img.flip-front")[0];
        var image2 = $(this).find("img.flip-back")[0];
        $(image2).stop().animate({ width: '0px', height: '' + height + 'px', marginLeft: '' + margin + 'px', opacity: '0.5' }, { duration: 200 });
        window.setTimeout(function () {
            $(image1).stop().animate({ width: '' + width + 'px', height: '' + height + 'px', marginLeft: '0px', opacity: '1' }, { duration: 200 });
        }, 200);
    });

});