Edit in JSFiddle

    $('.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();
    });

.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;
}

<ol class="before-after">
    <li class="before">
        <img src="http://farm4.staticflickr.com/3309/4584446317_ae43ab2563.jpg" />
    </li> 
    <li class="after">
        <img src="http://farm5.staticflickr.com/4080/4810022338_fdf4bb4d85.jpg" />
    </li>
</ol>
img by <a href="http://www.flickr.com/photos/arcticpuppy/">tibchris</a> CC-BY