30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.Tween

//create a new function
var tweenerFunction  = function() {
        //now select the element you want to tween
        //then tack on .tween
        //finally declare the style property and value you want to tween to
	$('tweener').tween('width', '300px');
}
 
window.addEvent('domready', function() {
        //here we add an event to a button to initiate the tween on click
        //and we call our tween function
        $('tween_button').addEvent('click', tweenerFunction);
});

<div id="tweener"></div>
<button id="tween_button">300 width</button>

//create a new function
var tweenFadeFifty = function() {
       //here you create your selector
       //then you add .fade
       //finally declare a value between 0 and 1 (0 being invisible, 1 being full visibility)
	$('tweener').fade('.5');
}
 
window.addEvent('domready', function() {
        //here we add an event to a button to initiate the tween on click
        //and we call our tween function
        $('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

<div id="tweener">
<button id="tween_fade_fifty">Fade to fifty percept opacity</button>

//create a function
var tweenHighlight = function(event) {
        //here we are using event.target, passed from the function
        //this translates to "the target of the event"
        //and since the effect applies to the same element that the event is attached to
        //we don't have to create the selector again
        //Note: addEvent will automatically pass the event object as a parameter
        //to the function it calls... very handy
	event.target.highlight('#eaea16');
}
 
//create a function
//you need to pass a parameter
//since this function is being called in an event
//the function will automatically be passed the event object
//and you can then refer to the element with .target
//(the target of the event)
var tweenHighlightChange = function(item) {
        //here instead of a single color, we add a comma separated second
        //this will set the first color, then transition to the second
        item.target.highlight('#eaea16', '#333333');
}
 
window.addEvent('domready', function() {
	$('tweener').addEvent('mouseover', tweenHighlight);
        $('tweenerChange').addEvent('mouseover', tweenHighlightChange);
});

<div id="tweener"></div>
<div id="tweenerChange"></div>

var tweenerFunction  = function() {
	$('tweener').tween('width', '300px');
}
 
var tweenerGoBack  = function() {
	$('tweener').tween('width', '100px');
}
 
//.fade will also accept 'out' and 'in', equaling 0 and 1 respectively
var tweenFadeOut = function() {
	$('tweener').fade('out');
}
 
var tweenFadeFifty = function() {
	$('tweener').fade('.5');
}
 
var tweenFadeIn = function() {
	$('tweener').fade('in');
}
 
var tweenHighlight = function(event) {
	event.target.highlight('#eaea16');
}
 
window.addEvent('domready', function() {
	$('tween_button').addEvent('click', tweenerFunction);
	$('tween_reset').addEvent('click', tweenerGoBack);
	$('tween_fade_out').addEvent('click', tweenFadeOut);
	$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
	$('tween_fade_in').addEvent('click', tweenFadeIn);
	$('tweener').addEvent('mouseover',tweenHighlight);
});

<div id="tweener"></div><br />
<button id="tween_button">300 width</button>
<button id="tween_reset">100 width</button>
<button id="tween_fade_out">Fade Out</button>
<button id="tween_fade_fifty">Fade to 50% opacity</button>
<button id="tween_fade_in">Fade In</button>

#tweener {
	height: 100px
	width: 100px
	background-color: #3399CC
}

window.addEvent('domready', function() {
        //first we pass the element we want to tween to a var
        var newTweenElement = $('newTween');
 
       //now we create a new tween event, and pass that element as a parameter
       var newTween = new Fx.Tween(newTweenElement);
});

<!-- here is the element we want to apply the tween to -->
<div id="newTween"></div>
 
<!-- here is a button that will come into play shortly -->
<button id="netTween_set">Set</div>

var newTweenSet = function() {
        //notice the use of "this"
        //read on to learn how "this" is used
	this.set('width', '300px');
}

//first we add a click event to the button we saw above
//then, instead of just calling the function
//we call the function and add ".bind()"
//we then place whatever we want to pass to the function
//now, inside the function "newTweenSet," "this" will refer to "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

//here is our function
var newTweenSet = function() {
        //since we used bind, "this" now refers to "newTween"
        //so we are really saying
        //newTween.set('width', '300px')
	this.set('width', '300px');
}
 
window.addEvent('domready', function() {
        //first we place our element into a var
	var newTweenElement = $('newTween');
 
        //then we create a new FX.Tween and assign it to its own var
        var newTween = new Fx.Tween(newTweenElement);
 
        //now we add our event and bind newTween and newTweenSet
	$('netTween_set').addEvent('click', newTweenSet.bind(newTween));  
});

//this will tween from the existing value of width to 300px
newTween.start('width', '300px');
 
//this one will first set the width to 100px, then tween to 300px
newTween.start('width', '100px', '300px');