Animations and Effects
WHAT’S IN THIS CHAPTER?
- Animating Elements and CSS Properties
- Resizing Elements
- Creating Custom Animations
- Animations with HTML5 Canvas
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.
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 ...