Question

我有这段代码，我希望在悬停.ita时可以看到所有.eng，.rus，.all。在mouseleave之后，我想淡出a＆＃39;并将.languages缩小到.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>

在下面代码中的mouseleave事件中，我想首先补间 languages 元素，然后将容器的宽度调到60px。由于它发生异步，我无法看到元素的淡出。

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

我正在阅读链方法，但它指的是一个类，而不是事件，正如我所理解的那样。

由于

Answer 1

您可以将link: chain设置为Fx.Tween的实例

至于其余的，它更复杂但是这样的东西会起作用。

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

你可以用纯CSS3完成所有这些，你知道吗，对吧？

在事件

1 个答案: