0

やあ！私は本当にここで私の問題に関連するトピックを見つけようとしますが、私は運がありませんでした...

いくつかの簡単なコード：同じ位置に配置された2つの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のデモには、次のような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
        });
    }
});

ご覧のとおり、管理できる要素は1つ（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 に答える