30 Days of Mootools 1.2 Tutorials – Day 22 – Fx.Elements

var fxElementsArray = $$('.myElementClass');

var fxElementsObject = new Fx.Elements(fxElementsArray, {
	//Fx Options
	link: 'chain',
	duration: 1000,
	transition: 'sine:in:out',
 
	//Fx Events
	onStart: function(){
		startInd.highlight('#C3E608');
	}
});

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

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

.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;
}

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