JSFiddle - React, Tailwind, and code Playground

by rastrano

HTML

<script type="text/javascript" src="http://github.com/SunboX/mootools-fx-text/raw/master/Source/Fx.Text.js"></script>

<div id="canvas">Dojo and MooTools</div>

<ul>
    <li><a href="#" title="Get friendly with the Natives">change text 1</a></li>
    <li><a href="#" title="A Better Way to use Elements">change text 2</a></li>
    <li><a href="#" title="MooTools Roundup February 2010">change text 3</a></li>
    <li><a href="#" title="More Than Meets the Eye: Form.Request">change text 4</a></li>
<ul>

CSS

body { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
#canvas { color: #666; border: #ccc 1px solid; background: #efefef; padding: 10px; margin: 10px; }
ul { margin: 0 0 0 5px; }
ul li { margin: 5px; }

JavaScript

var fx = new Fx.Text('canvas', {
    duration: 'long',
    transition: Fx.Transitions.Bounce.easeOut
});

$$('a').addEvent('click', function(e){
    e.stop();
    fx.start(this.get('title', ''));
});