Book Image

MooTools 1.2 Beginner's Guide

Book Image

MooTools 1.2 Beginner's Guide

Overview of this book

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.
Table of Contents (14 chapters)
MooTools 1.2 Beginner's Guide
Credits
About the Authors
About the Reviewer
Preface

Time for action—exploring the $clear() function with periodical()


To showcase the use of $clear(), we'll use one of its complimentary functions, periodical(). We'll create a function that will transition #bluebox to the left in increments of 50 pixels, five times. Then we're going to stop executing the function further (or else it will keep moving to the left infinitely).

  1. First, we'll create an integer object that will hold the number of times our function has executed.

    var counter = 0;
    
  2. Next, let's create our function, we'll called it moveLeft().

    var moveLeft = function() {
    // our function code goes here.
    }
    
  3. Inside moveLeft, we'll write use the tween() method to move #bluebox to the left.

    $('bluebox').tween('margin-left', (counter+1)*50);
    
  4. Now, we need to increment the counter every time the function is called. We'll use the following line of code, which will execute as soon as our box has finished the animation to the left:

    counter++;
    
  5. Let's now use periodical() to execute the moveLeft() at...