        <style type="text/css">
* {
    padding: 0;
    margin: 0;
}
div {
    width: 40em;
    overflow: hidden;
}
ul {
    list-style: none;
    width: 200%;
}
    ul li {
        background: red;
        float: left;
        width: 10em;
        height: 8em;
    }
    ul li.second { background: green; }
    ul li.third { background: blue; }
    ul li.fourth { background: orange; }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
(function($) {
    $.fn.midnightBicycleMystery = function(options) {
        var options = $.extend({
            normalWidth: '10em',
            bigWidth: '16em',
            smallWidth: '8em',
            duration: 200
        }, options)

        return this.each(function() {
            $('li', this).bind('mouseenter', function(e) {
                var self = $(this),
                    sibs = self.siblings();

                self.add(sibs).stop();

                self.animate({
                    width: options.bigWidth
                }, options.duration);

                sibs.animate({
                    width: options.smallWidth
                }, options.duration);
            })
            .bind('mouseleave', function(e) {
                var self = $(this),
                    sibs = self.siblings();

                self.add(sibs).stop();

                sibs.animate({
                    width: options.normalWidth
                }, options.duration);

                self.animate({
                    width: options.normalWidth
                }, options.duration);
            })
        });
    }
})(jQuery)

jQuery(function() {
    $('div.foo ul').midnightBicycleMystery();
});
        </script>