如何在Mootools中的mouseenter函數中管理多個元素？

Question

嗨！ 我確實嘗試在這里找到與我的問題相關的主題，但是我沒有運氣...

一些簡單的代碼：我有兩個div，它們位於相同的位置-

<div id="fader1" style="display:inline-block;position:absolute;background-image:url(images/fader1.png);opacity:1;width:296px;height:435px;margin:-215px 50px -20px"></div>
<div id="fader2" style="display:inline-block;position:absolute;background-image:url(images/fader2.png);opacity:0;width:296px;height:425px;margin:-215px 50px -20px"></div>

這個想法是當鼠標經過div“ fader1”時，不透明度更改為0，而fader2的不透明度更改為1。如果將光標移到div之外，請像開始一樣向后旋轉。

我已經嘗試過使用mootools實現這一目標，但現在陷入了困境。

Mootools Demos具有Fx.Morph的示例，如下所示：

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){
        // This morphes the opacity and backgroundColor
        this.morph({
            'opacity': 0.6,
            'background-color': '#E79D35'
        });
    },
    mouseleave: function(){
        // Morphes back to the original style
        this.morph({
            opacity: 0.5,
            backgroundColor: color
        });
    }
});

如您所見，我只能管理一個元素（this.morph）。 我嘗試放置其他元素，例如：“（'fader1'）。morph”，但沒有結果...但是我認為我做錯了。

我非常感謝您在mootools中為我提供的任何幫助。 問候！

Answer 1

您應該閱讀手冊，而不要復制/粘貼示例。

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){
        // This morphes the opacity and backgroundColor
        this.morph({
            'opacity': 0.6,
            'background-color': '#E79D35'
        });
    }
});

在上述功能，范圍this是指myElement。 如果您需要引用其他元素，則只需引用。

(function(){
var other = $('myOtherElement').set('moprh', {
    link: 'cancel'
}); // save a reference and set link to cancel existing morphing

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){
        // This morphes the opacity and backgroundColor
        other.morph({
            'opacity': 0.6,
            'background-color': '#E79D35'
        });
    },
    mouseleave: function(){
        // Morphes back to the original style
        other.morph({
            opacity: 0.5,
            backgroundColor: color
        });
    }
});
}());

閱讀$（documentid）返回的內容（元素），將元素保存到變量中，然后再引用它-這是標准的javascript。