O'Reilly logo

Professional jQuery by Rob Larsen, Cesar Otero

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 7

Animations and Effects

WHAT’S IN THIS CHAPTER?

  • Animating Elements and CSS Properties
  • Resizing Elements
  • Creating Custom Animations
  • Animations with HTML5 Canvas

One of the fun parts of working with the Web is animating it. By animation we not only mean moving elements around, but also toggling their visibility, altering their properties in either a timed fashion or in reaction to an event, or even resizing an element. Web animation use to be done mostly with Flash, and JavaScript was used for minor situations such as rollovers. But, the tables have turned, and with the help of jQuery, animating the Web through JavaScript is much more predominant.

In this chapter you explore some of the shortcuts that jQuery offers for animating components in your web applications such as moving, fading, toggling, and resizing elements. You explore how to combine different animations effects in parallel with the $.animate() method, and then re-apply the same techniques with the new HTML5 canvas tag.

ANIMATING ELEMENTS

Elements, like divs, have two properties that determine their positioning on a web page: the top and left properties. The positions can be expressed in either percentage or using a unit of length like pixels or centimeters.

The following code sample illustrates the basic concept underlying an animation, programmatically adjusting the position of an element. In it, any click on the document moves the green div ten pixels to the right.

<!DOCTYPE html> <html> <head> <style ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required