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＆＃34; fader1＆＃34;时，不透明度变为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）。我尝试将其他元素放在：＆＃34;（＆＃39; fader1＆＃39;）。变形＆＃34;没有结果......但我认为我做错了。

我非常感谢你能帮助我在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。

如何在Mootools中管理mouseenter函数中的多个元素？

1 个答案: