CODEWITHSUNDEEP
javascriptmootools
Jonathan Kim
Jonathan Kim

Reputation: 9

How to manage multiple elements in a mouseenter function in Mootools?

Hi! I really try to find a topic related to my issue here, but I had no luck...

Some simple code: I have two divs, placed in the same position -

<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>

The idea is when the mouse passes over the div "fader1", the opacity changes to 0, and the opacity of fader2 changes to 1. And turn back like the beginning if I put the cursor out of the div.

I've tried to achieve this with mootools but I'm now in a dead-end.

Mootools Demos have the example of Fx.Morph like this:

$('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
        });
    }
});

As you can see, I can only manage ONE element (this.morph). I try to put other element like: "('fader1').morph" with no results... But I think that I'm doing it wrong.

I really appreciate any help you can give me to achieve this in mootools. Regards!

Upvotes: 0

Views: 197

Answers (1)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

you should read the manual and not copy/paste from examples. 

$('myElement').set('opacity', 0.5).addEvents({
    mouseenter: function(){
        // This morphes the opacity and backgroundColor
        this.morph({
            'opacity': 0.6,
            'background-color': '#E79D35'
        });
    }
});

in the above function, the scope this refers to myElement. if you need to reference a different element, then simply do so.

(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
        });
    }
});
}());

read up on what $ (documentid) returns (an element), saving an element into a variable and referencing it later - this is standard javascript.

Upvotes: 1

Related Questions