シンプルなビフォー/アフター

Result

jQuery

class="before"にだけwidh="130"をつける
    $('.before-after li').addClass("rollover").filter(".before").css('width', 130);
    //マウスムーブイベント発火
    $('.before-after').addClass("active").mousemove(function(e) {
        var $el = $(this);
        w = e.pageX - $el.offset().left;
        $('.before').css('width', w);
    });
    $('.before-after li img').mousedown(function(event) {
       //マウスが外れたらイベントをキャンセルする
        event.preventDefault();
    });

css

.before-after{
    border:1px solid #333;
    display:block;
    list-style:none;
    margin:30px auto;
    overflow:hidden;
    position:relative;
    width:500px;    
}

.before-after.active{
    height:320px;
}

.rollover {
    display:block;
    overflow:hidden;
    position:absolute;
}
.active .before {
    border-right:3px solid #000;
}
.before {
    left:0px;
    top:0px;
    z-index:2;
}

.after {
    right:0px;
    top:0px;
    z-index:1;
}

html

<ol class="before-after">
    <li class="before">
        <img src="bar.jpg" />
    </li> 
    <li class="after">
        <img src="foo.jpg" />
    </li>
</ol>