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
el.set('tween', {onComplete: function(){
... like this: stackoverflow.com/a/10013934/2256325setStyle
or could it also tween with opacity? In that case you could do it with CSS also.