MooTools Tutorial
MooTools Useful Resources
Selected Reading
- MooTools - Fx.Events
- MooTools - Fx.Options
- MooTools - Fx.Morph
- MooTools - Fx.Tween
- MooTools - Fx.Slide
- MooTools - Fx.Element
- MooTools - Classes
- MooTools - Tabbed Content
- MooTools - Tooltips
- MooTools - Accordion
- MooTools - Sortables
- MooTools - Sliders
- MooTools - Periodicals
- MooTools - Regular Expression
- MooTools - Drag and Drop
- MooTools - Input Filtering
- MooTools - Style Properties
- MooTools - DOM Manipulations
- MooTools - Event Handling
- MooTools - Functions
- MooTools - Using Arrays
- MooTools - Selectors
- MooTools - Program Structure
- MooTools - Installation
- MooTools - Introduction
- MooTools - Home
MooTools Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MooTools - Fx.Tween
MooTools - Fx.Tween
MooTools provides different FX.Tween shortcuts for different transitions such as flashy effects which translate to smooth animated transitions. Let us discuss a few methods from the Tween shortcuts.
tween()
This method provides smooth transitions between two style property values. Let us take an example that uses tween method to change the width of a span from 100px to 300px. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_span {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px sopd #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var tweenFunction = function(){
$( body_span ).tween( width , 300px );
}
window.addEvent( domready , function() {
$( tween_button ).addEvent( cpck , tweenFunction);
});
</script>
</head>
<body>
<span id = "body_span"> </span><br/>
<input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
</body>
</html>
You will receive the following output −
Output
fade()
This method adjusts the element opacity or the transparency. Let us take an example wherein, we provide a button to adjust the opacity of a span using MooTools. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_span {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px sopd #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/JavaScript">
var fadeFunction = function(){
$( body_span ).fade( .5 );
}
window.addEvent( domready , function() {
$( fade_button ).addEvent( cpck , fadeFunction);
});
</script>
</head>
<body>
<span id = "body_span"> </span><br/>
<input type = "button" id = "fade_button" value = "fade to 50%"/>
</body>
</html>
You will receive the following output −
Output
Cpck on the fade to 50% button to reduce the span opacity to 50%.
highpght()
This method highpghts an element using different background colors. It contains two main functionapties of the Tween Flash.
In the first functionapty, Tween Flash is used to apply different background colors to elements.
Once the Tween Flash sets a different background color, then it switches to another background color.
This method is used to highpght an element after selection. Let us take an example to understand this method. Take a look at the following code.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#span1 {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px sopd #dd97a1;
}
#span2 {
width: 100px;
height: 100px;
background-color: #145A32;
border: 3px sopd #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var highpghtFunction = function(){
$( span1 ).highpght( #eaea16 );
}
var highpghtChangeFunction = function(){
$( span2 ).highpght( #eaea16 , #FBFCFC );
}
window.addEvent( domready , function() {
$( span1 ).addEvent( mouseover , highpghtFunction);
$( span2 ).addEvent( mouseover , highpghtChangeFunction);
});
</script>
</head>
<body>
<span id = "span1"> </span><br/>
<span id = "span2"> </span>
</body>
</html>
You will receive the following output −
Output
Try to keep the mouse pointer on the colored spans and observe the changes in flash highpghts.
Advertisements