MooTools Fx.options- Quad Transition - MooTools

Displays a quadratic transition with in, out, and in-out events. Let us take an example wherein, we add a mouse down event to a div element along with quadratic events. Take a look at the following code.

Example

<!DOCTYPE html> <html> <head> <style> #quad_in { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } #quad_out { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } #quad_in-out { width: 100px; height: 20px; background-color: #F4D03F; border: 2px solid #808B96; } </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"> window.addEvent('domready', function() { $('quad_in').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'quad:in'}); this.tween('width', [80, 400]); }); $('quad_out').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'quad:out'}); this.tween('width', [80, 400]); }); $('quad_in-out').addEvent('mousedown', function(event) { this.set('tween', {duration: 'long', transition: 'quad:in-out'}); this.tween('width', [80, 400]); }); }); </script> </head> <body> <div id = "quad_in"> Quad : in</div><br/> <div id = "quad_out"> Quad : out</div><br/> <div id = "quad_in-out"> Quad : in-out</div><br/> </body> </html>

You will receive the following output −

Output

MooTools Related Tutorials
HTML 5 Tutorial	Zend Tutorial
MySQL Tutorial	Drupal Tutorial
CSS Advanced Tutorial	Javascript Advanced Tutorial
CakePHP Tutorial	CodeIgniter Tutorial
JSON (JavaScript Object Notation) Tutorial

MooTools Related Interview Questions
HTML 5 Interview Questions	Zend Interview Questions
MySQL Interview Questions	Drupal Interview Questions
UI Developer Interview Questions	CSS Advanced Interview Questions
Javascript Advanced Interview Questions	CakePHP Interview Questions
CodeIgniter Interview Questions	JSON (JavaScript Object Notation) Interview Questions
Advanced jQuery Interview Questions	UI Designer Interview Questions

MooTools Related Practice Tests
HTML 5 Practice Tests	Zend Practice Tests
MySQL Practice Tests	Drupal Practice Tests
UI Developer Practice Tests	CakePHP Practice Tests
CodeIgniter Practice Tests	JSON (JavaScript Object Notation) Practice Tests
Advanced jQuery Practice Tests

MooTools Fx.options- Quad Transition - MooTools

Example

Output

MooTools Related Tutorials

MooTools Related Interview Questions

MooTools Related Practice Tests

Skills by Location

Jobs By Companies

State Govt Jobs

Bank Jobs

Defence Jobs

PSC

SSC Jobs

Railway Jobs

Latest walkins

Walkins by Skill

Walkins by location

Walkins by Company

POPULAR COURSES