如何在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的演示有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'）。變形」沒有結果......但我認爲我做錯了。

我真的很感激你可以給我任何幫助，以在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。