Happy Programming

var Fancy = Class.create({
    initialize: function(elem, initPosElem) {
        var that = this;
        this.elem = elem;
        this.pos = elem.cumulativeOffset();
        this.dim = elem.getDimensions();
        this.bg = new Element('div');
        this.bg.initLeft = initPosElem ? initPosElem.positionedOffset().left : 0;
        this.bg.initWidth = initPosElem ? parseInt(initPosElem.getStyle('width')) : 0;        
        this.bg.setStyle({
            position: 'absolute',
            backgroundColor: '#FFF',
            top: '0px',
            left: this.bg.initLeft + 'px',
            width: this.bg.initWidth + 'px',
            height: this.elem.getStyle('height')
        });
        this.elem.insert({top: this.bg});
        this.move = this._move.bind(this);
        this.moveRelease = this._moveRelease.bind(this);
        $$('li a').each(function(elem) {
            elem.observe('mouseover', that.move);
            elem.observe('mouseout', that.moveRelease);
        });
    },
    
    _move: function(event) {
        var that = this;
        var elem = event.element();
        if (this.timeId2) clearInterval(this.timeId2);
        if (this.timeId) clearInterval(this.timeId);
        var width = elem.getWidth();
        var x1 = this.bg.positionedOffset().left;
        var x2 = elem.up().positionedOffset().left;
        var dx = Math.abs(x2 - x1);
        this.bg.setStyle({width: width + 'px'});
        
        this.timeId = setInterval(function() {
    	    var dmx = Math.abs(x2 - x1);
    	    x1 += (x2 - x1) / 10;
            that.bg.setStyle({left: x1 + 'px'});
            if (dmx < 1) {
                clearInterval(that.timeId);
                that.bg.setStyle({left: x2 + 'px'});   
            }
    	}, 15);
    },
    
    _moveRelease: function(event) {
        var that = this;
        if (this.timeId2) clearInterval(this.timeId2);
        if (this.timeId) clearInterval(this.timeId);
        var width = this.bg.initWidth;
        var x1 = this.bg.positionedOffset().left;
        var x2 = this.bg.initLeft;
        var dx = Math.abs(x2 - x1);

        this.timeId2 = setInterval(function() {
    	    x1 += (x2 - x1) / 10;
    	    var dmx = Math.abs(x2 - x1);
            if (dx / 2 < dmx) var w = (dx - dmx);
            else var w = dmx;
            that.bg.setStyle({
                width: Math.max(width, width + w) + 'px',
                left: x1 + 'px'
            });
            if (dmx < 1) {
                clearInterval(that.timeId2);
                that.bg.setStyle({
                    left: that.bg.initLeft + 'px',
                    width: that.bg.initWidth + 'px'
                });   
            }
    	}, 15);
    }
});

なんだか汎用性のない雑なコードになってしまったなあ・・（HTMLやCSSの書き方にかなり依存してしまっている）。
でも、とりあえず動くのでこれを今後修正していくとしよう。

サンプル