Chaining two functions in an event

Question

I have this code, I'd like to make all a's .ita, .eng, .rus visible on hovering the .all. After mouseleave, I'd like to fade out the a's, and shrink back .languages to the size of just .all.

<nav class="languages">
    <a href="#!" class="all">L</a>
    <a href="http://localhost/homepage" class="ita">ITA</a>
    <a href="http://localhost/en/homepage" class="eng">ENG</a>
    <a href="http://localhost/ru/homepage" class="rus">RUS</a>
</nav>

In the mouseleave event in the code below I would like to first tween the languages element, then bring the width of the container to 60px. Since it happens async, I cannot manage to see the fadeout of the element.

$$('nav.languages').addEvents({
    'mouseenter': ->
        this.setStyle('width', "400px")
        languages.tween('opacity', 0, 1)
    , 'mouseleave': ->
        languages.tween('opacity', 1, 0)
        this.setStyle('width', "60px")
    })

I am reading about the chain method but it refers to a class, not an event, as I have understood.

Thanks

Answer 1

you can set link: chain to the instance of Fx.Tween

as for the rest, its more complex but something like this will work.

http://jsfiddle.net/d201npL2/1/

(function(){
    var languages = document.getElement('nav.languages span');
    languages.set('tween', {
        link: 'chain'
    });

    var nav = document.getElement('nav.languages').addEvents({
        'mouseenter:relay(a.all)': function(){
            nav.setStyle('width', 400);
            languages.fade(0, 1);
        }, 
        'mouseleave': function(){
            languages.fade(1, 0);
            this.setStyle('width', 60)
        }
    });
}());

you can do all this in pure CSS3, you know that, right?