0

你好！我真的试图在这里找到与我的问题相关的主题，但我没有运气......

一些简单的代码：我有两个 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 中为我提供的任何帮助。问候！

4

1 回答 1

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。

于 2012-09-30T15:30:53.087 回答