如何在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。