spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column19


JavaScript Animations, Part II

Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow

In Column 18, JavaScript Animations, Part I, we discussed basic animation routines. In this column we'll introduce a new and improved animation engine. Our "older" engine has several disadvantages:

  • It computes the animation path before it starts animating the element. So if you want to move an element in a circular path 1000 times, with 100 steps per circle, our script must compute the coordinates of 100,000 points -- a definite crash. For longer animations, it's best to perform real-time calculations.
  • If you tried to implement the script, you probably noticed that it is very difficult to define many consecutive animations. It requires strings within strings -- a real mess.

Not only will we show you how to overcome these problems, but we'll also discuss several additional enhancements, such as nested animations. In general, you'll learn:

  1. How to create real-time animations.
  2. How to execute consecutive animations.
  3. How to create nested animations.
  4. How to overcome the resize/reload bug.

We'll develop three new versions of our animate.js library, with various enhancements for your benefit.

More Resources from Doc JavaScript
Columns Popular Columns Tips Tools
Latest Columns
41-50 | 31-40 | 21-30
11-20 | 1-10
Working with Windows
JavaScript and Frames
Bookmarklets
Random Tips
Personalized Tips
RSS Channels
Menu Builder
Rollover Builder
Rotation Builder
Reference Tip Categories (want one?)
Links
For Your Site
Did you learn something? Do you like this site? Please link to us!

http://www.internet.com


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark


Created: May 21, 1998
Revised: May 21, 1998

URL: http://www.webreference.com/js/column19/