30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
Welcome back to 30 days of Mootools 1.2 tutorials. If you haven’t already, be sure to check out the rest of our mootools series. Today, we are going to take a look at the Fx.Elements plugin, which is basically an extension of Fx.Morph.
Instead of applying to a single element, Fx.Elements allows you to add the Fx functionality to multiple dom elements in one go. This can be very useful when you are applying the same options to more than one element, as we saw in the final example on day 20.
Implementing Fx.Elements looks just like Fx.Morph. The difference between the two doesn’t come into play until you .start({}) an effect or .set({}) some styles.
To keep things tidy, lets first set up an array to pass to Fx.Elements.
var fxElementsArray = $$('.myElementClass');
Now we can pass our array to the Fx.Elements object.
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});
Just like Fx.Morph, Fx.Elements extends the Fx class, giving you access to all the Fx options and events.
To start an Fx.Elements effect, or to set styles using Fx.Elements, you start out just as you would with Fx.Tween or Fx.Morph, but instead of setting the parameters directly on the Fx.Elements object, you refer to the elements via the index - the first element is 0, the second is 1, and so on.
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
Just like Fx.Morph, you can set either a start value and end value for the element to transition to and from, or you can just set a single parameter (like we did with 0’s width) and the element will transition from its current state to the new parameter.
And that’s pretty much all there is to Fx.Elements. Check out the example below to see it in action.
Here we have applied Fx.Elements to two elements. There are a few different types of transitions to check out, along with a pause button which lets you freeze the transition mid stream.
First, lets set up our elements, our control buttons (including reset, pause and resume), and a few indicators so we can better watch the process unfold.
<div id="start_ind" class="ind">onStart</div>
<div id="cancel_ind" class="ind">onCancel</div>
<div id="complete_ind" class="ind">onComplete</div>
<div id="chain_complete_ind" class="ind">onChainComplete</div>
<span id='buttons'>
<button id="fxstart">Start A</button>
<button id="fxstartB">Start B</button>
<button id="fxset">Reset</button>
<button id="fxpause">Pause</button>
<button id="fxresume">Resume</button>
</span>
<div class="myElementClass">Element 0</div>
<div class="myElementClass">Element 1</div>
Our css is nice and simple.
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
Now for the mootools.
var startFXElement = function(){
this.start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 500,
'background-color': '#333'
},
'1': {
'width': 500,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass');
var startInd = $('start_ind');
var cancelInd = $('cancel_ind');
var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
},
onCancel: function(){
cancelInd.highlight('#C3E608');
},
onComplete: function(){
completeInd.highlight('#C3E608');
},
onChainComplete: function(){
chainCompleteInd.highlight('#C3E608');
}
});
$('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
$('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){
fxElementsObject.pause();
});
$('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
As you can see, Fx.Elements is very straightforward. To learn more, check out the Fx.Element docs, the Fx.Morph and Fx docs.
Also, be sure to check our tutorials on Fx.Morph and the Fx options and events.