You are previewing jQuery 1.4 Animation Techniques Beginner's Guide.
O'Reilly logo
jQuery 1.4 Animation Techniques Beginner's Guide

Book Description

Quickly master all of jQuery’s animation methods and build a toolkit of ready-to-use animations using jQuery 1.4

  • Create both simple and complex animations using clear, step-by-step instructions, accompanied with screenshots

  • Walk through each of jQuery’s built-in animation methods and see in detail how each one can be used

  • Over 50 detailed examples of different types of web page animations

  • Attractive pictures and screenshots that show animations in progress and how the examples should finally appear

  • Contains examples featuring many new HTML5 elements and CSS3 styling

  • Follow the examples in a step-by-step approach beginning with simple concepts and building up to more advanced implementations

  • In Detail

    jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML, and is the most popular JavaScript library in use today. Using the features offered by jQuery, developers are able to create dynamic web pages. This book will act as a resource for you to create animation and advanced special effects in your web applications, by following the easy-to-understand steps mentioned in it.

    jQuery 1.4 Animation Techniques: Beginners Guide will allow you to master animation in jQuery to produce slick and attractive interfaces that respond to your visitors' interactions. You will learn everything you need to know about creating engaging and effective web page animations using jQuery. The book uses many examples and explains how to create animations using an easy, step-by-step, beginners guide approach.

    This book provides various examples that gradually build up the reader’s knowledge and practical experience in using the jQuery API to create stunning animations. The book starts off by explaining how animations make your user interface interactive and attractive. It explains the various methods used to make the element being animated appear or disappear. It provides a set of steps to create simple animations and show fading animations.

    You can later learn how to make complex animations by chaining different effects together as well as how to halt a currently running application. You will find out how to slide your animation elements and learn to create custom animations that can be complex and specialized.

    You will find out how to obtain and set up the jQuery UI— the official user interface library for jQuery. The book will tell you how to animate a page's background image, and will teach you how to make images scroll in a certain direction and at a certain speed depending on the movement of the mouse pointer

    Learn how to create engaging and interactive user interfaces, and attractive special effects using jQuery

    Table of Contents

    1. jQuery 1.4 Animation TechniquesBeginner's Guide
      1. Table of Contents
      2. jQuery 1.4 Animation Techniques Beginner's Guide
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Time for action – heading
          1. What just happened?
          2. Pop quiz – heading
          3. Have a go hero – heading
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. Introduction
        1. Animation on the Web
        2. The power of animated UIs
          1. When to use animations
          2. When not to use animations
          3. Animation checklist
        3. Animating with jQuery
        4. The template file
          1. Creating a project folder
        5. A basic animation example
        6. Time for action – creating an animated loader
          1. What just happened?
          2. Pop quiz – basic animation with jQuery
          3. Have a go hero – extending the loading animation
        7. Summary
      10. 2. Fading Animations
        1. Fading animations
          1. Configuring the animations with arguments
          2. jQuery's Unified Animation API
          3. Enhancing simple CSS hover states with fadeIn
        2. Time for action – adding the underlying markup and styling
          1. What just happened?
        3. Time for action – scripting the animation
          1. What just happened?
          2. Pop quiz – using fadeIn
          3. Have a go hero – doing more with fadeIn
        4. Fading elements out
        5. Time for action – creating the dialog
          1. What just happened?
          2. Pop quiz – using fadeOut
          3. Have a go hero – doing more with fadeout
        6. Fading PNGs in IE
        7. Using fadeToggle() for convenient state-checking logic
        8. Time for action – showing and hiding with fadeToggle()
          1. What just happened?
          2. Pop quiz – using fadeToggle()
          3. Have a go hero – extending fadeToggle()
        9. Greater opacity control with fadeTo()
          1. Animating to partial opacity
        10. Time for action – creating the example page
          1. What just happened?
        11. Time for action – adding the behavior
          1. What just happened?
          2. Pop quiz – using fadeTo
          3. Have a go hero – doing more with fadeTo
          4. Fading table-rows in Internet Explorer
        12. Time for action – fading table-rows in IE
          1. What just happened?
        13. Showing and hiding
          1. Flyout submenus with jQuery's show/hide logic
        14. Time for action – animations with show/hide
          1. What just happened?
          2. Pop quiz – using show and hide
          3. Animated toggling
        15. Time for action – replacing show and hide with toggle
          1. Have a go hero – doing more with toggle
        16. Summary
      11. 3. Managing Animations
        1. Working with the queue
          1. Viewing the queue
        2. Time for action - viewing the queue
          1. What just happened?
          2. Pop quiz – viewing the queue
          3. Adding a function to the queue
        3. Time for action – adding a single function to the queue
          1. What just happened?
          2. Pop quiz – adding new items to the array
          3. Using a callback function to keep the queue moving
        4. Time for action – keeping the queue running
          1. What just happened?
          2. Pop quiz – keeping the queue running
          3. Replacing the queue
        5. Time for action – replacing the queue
          1. What just happened?
          2. Pop quiz – replacing the queue
        6. Ensuring custom queues iterate correctly
        7. Time for action – dequeueing functions
          1. What just happened?
        8. Stopping an animation
        9. Time for action – preventing animation build-up using the stop method
          1. What just happened?
          2. Pop quiz – stopping an animation
        10. Delaying queue execution
        11. Clearing the queue
        12. Useful properties of the jQuery object
          1. Globally disabling animations
          2. Changing the default frame rate
        13. Summary
      12. 4. Sliding Animations
        1. Sliding elements into view
        2. Time for action – creating a slide-down login form
          1. What just happened?
          2. Pop quiz – sliding elements down
          3. Have a go hero – sliding elements down
        3. Sliding elements out of view
        4. Time for action – sliding elements up
          1. What just happened?
          2. Pop quiz – sliding elements up
          3. Have a go hero – fixing the Cancel link
        5. Toggling the slide
        6. Time for action – using slideToggle
          1. What just happened?
          2. Have a go hero – doing more with slideToggle
          3. Pop quiz – using slideToggle
        7. Easing
        8. Time for action – adding easing
          1. What just happened?
          2. Using an object literal to add easing
        9. Time for action – using the alternative argument format
          1. What just happened?
          2. Have a go hero – using easing
          3. Pop quiz – using easing
        10. The flicker effect
        11. Time for action – avoiding the flicker effect
          1. What just happened?
        12. Time for action – fixing the flicker
          1. What just happened?
          2. Pop quiz – fixing the flicker
          3. Have a go hero – adding a delay before showing a submenu
        13. Summary
      13. 5. Custom Animations
        1. The animate method
          1. Per-property easing
          2. An alternative syntax for animate()
        2. Animating an element's position
        3. Time for action – creating an animated content viewer
          1. What just happened?
        4. Time for action – initializing variables and prepping the widget
          1. What just happened?
        5. Time for action – defining a post-animation callback
          1. What just happened?
        6. Time for action – adding event handlers for the UI elements
          1. What just happened?
        7. Skinning the widget
        8. Time for action – adding a new skin
          1. What just happened?
          2. Pop quiz – creating an animated content-viewer
          3. Have a go hero – making the image viewer more scalable
          4. Animating an element's size
        9. Time for action – creating the underlying page and basic styling
          1. What just happened?
        10. Time for action – defining the full and small sizes of the images
          1. What just happened?
        11. Time for action – creating the overlay images
          1. What just happened?
        12. Time for action – creating the overlay wrappers
          1. What just happened?
        13. Time for action – maintaining the overlay positions
          1. What just happened?
          2. Pop quiz – creating expanding images
          3. Have a go hero – doing away with the hardcoded dims object
        14. Creating a jQuery animation plugin
        15. Time for action – creating a test page and adding some styling
          1. What just happened?
        16. Creating the plugin
        17. Time for action – adding a license and defining configurable options
          1. What just happened?
        18. Time for action – adding our plugin method to the jQuery namespace
          1. What just happened?
        19. Time for action – creating the UI
          1. What just happened?
        20. Time for action – creating the transition overlay
          1. What just happened?
        21. Time for action – defining the transitions
          1. What just happened?
        22. Using the plugin
          1. Pop quiz – creating a plugin
          2. Have a go hero – extending the plugin
        23. Summary
      14. 6. Extended Animations with jQuery UI
        1. Obtaining and setting up jQuery UI
          1. A new template file
        2. The new effects added by jQuery UI
          1. Using the effect API
          2. The bounce effect
            1. Configuration options
        3. Time for action – using the bounce effect
          1. What just happened?
          2. The highlight effect
            1. Configuration options
        4. Time for action – highlighting elements
          1. What just happened?
          2. The pulsate effect
            1. Configuration options
        5. Time for action – making an element pulsate
          1. What just happened?
          2. The shake effect
            1. Configuration options
        6. Time for action – shaking an element
          1. What just happened?
          2. The size effect
            1. Configuration options
        7. Time for action – resizing elements
          1. What just happened?
          2. The transfer effect
            1. Configuration options
        8. Time for action – transferring the outline of one element to another
          1. What just happened?
          2. Pop quiz – using the effect API
        9. Using effects with show and hide logic
          1. The blind effect
            1. Configuration options
        10. Time for action – using the blind effect
          1. What just happened?
          2. The clip effect
            1. Configuration options
        11. Time for action – clipping an element in and out
          1. What just happened?
          2. The drop effect
            1. Configuration options
        12. Time for action – using the effect
          1. What just happened?
          2. The explode effect
            1. Configuration options
        13. Time for action – exploding an element
          1. What just happened?
          2. The fold effect
            1. Configuration options
        14. Time for action – folding an element away
          1. What just happened?
          2. The puff effect
            1. Configuration options
        15. Time for action – making an element disappear in a puff
          1. What just happened?
          2. The slide effect
            1. Configuration options
        16. Time for action – sliding elements in and out of view
          1. What just happened?
          2. The scale effect
            1. Configuration options
        17. Time for action – scaling an element
          1. What just happened?
          2. Pop quiz – using show/hide logic
          3. Have a go hero – experimenting with the effect API
        18. Easing functions
        19. Time for action – adding easing to effects
          1. What just happened?
        20. Color animations
        21. Time for action – animating between colors
          1. What just happened?
        22. Class transitions
        23. Time for action – transitioning between classes
          1. What just happened?
          2. Pop quiz – easing, color, and class animations
        24. Summary
      15. 7. Full Page Animations
        1. Animated page scroll
        2. Time for action – creating the page that will scroll and its styling
          1. What just happened?
        3. Time for action – animating the scroll
          1. What just happened?
          2. Pop quiz – animating page scroll
          3. Have a go hero – extending animated page scroll
        4. The illusion of depth with parallax
          1. A little help from the new cssHooks functionality
        5. Time for action – creating the stage and adding the styling
          1. What just happened?
        6. Time for action – animating the background position
          1. What just happened?
          2. Pop quiz – implementing the parallax effect
          3. Have a go hero – extending parallax
        7. Animated single-page navigation
        8. Time fr action – creating individual pages and adding the styles
          1. What just happened?
        9. Time for action – adding the scroll navigation
          1. What just happened?
          2. Pop quiz – creating a single-page website
          3. Have a go hero – extending single-page navigation
        10. Stop-motion animation
          1. Imagery
          2. Technique
        11. Time for action – adding the markup and styling
          1. What just happened?
        12. Time for action – creating the frames and running the animation
          1. What just happened?
          2. Pop quiz – implementing stop-motion animation with jQuery
          3. Have a go hero – extending stop-motion animation
        13. Summary
      16. 8. Other Popular Animations
        1. Proximity animations
        2. Time for action – creating and styling the page
          1. What just happened?
        3. Time for action – prepping the page for sliding functionality
          1. What just happened?
        4. Time for action – animating the scroller
          1. What just happened?
        5. Time for action – adding the mouse events
          1. What just happened?
        6. Time for action – adding keyboard events
          1. What just happened?
          2. Have a go hero – extending proximity animations
          3. Pop quiz – implementing proximity animations
        7. Animated page headers
        8. Time for action – creating an animated header
          1. What just happened?
          2. Have a go hero – extending the animated header
        9. Marquee text
        10. Time for action – creating and styling the underlying page
          1. What just happened?
        11. Time for action – retrieving and processing the post list
          1. What just happened?
        12. Time for action – animating the post links
          1. What just happened?
          2. Have a go hero – extending the marquee scroller
          3. Pop Quiz – creating a marquee scroller
        13. Summary
      17. 9. CSS3 Animations
        1. CSS3 2D transforms
          1. Understanding the matrix
            1. Translate
            2. Scale
            3. Skew
            4. Rotation
          2. Working with transforms
          3. jQuery and transforms
          4. Internet Explorer transforms
        2. CSS3 3D transforms
        3. Animated rotation with jQuery and CSS3
        4. Time for action – animating an element's rotation
          1. What just happened?
          2. Problems with IE
          3. Pop quiz – implementing CSS3 rotation
          4. Have a go hero – extending CSS3 rotation
        5. Animated skewing
        6. Time for action – creating the underlying markup and basic styling
          1. What just happened?
        7. Time for action – initializing the widget
          1. What just happened?
        8. Time for action – animating an element's skew
          1. What just happened?
        9. Time for action – skewing an element from left to right
          1. What just happened?
        10. Time for action – wiring up the controls
          1. What just happened?
          2. Pop quiz – using the matrix
          3. Have a go hero – extending matrix animation
        11. Summary
      18. 10. Canvas Animations
        1. The canvas API
          1. The canvas element
          2. Context methods
          3. Native shapes
          4. Paths
          5. Images and patterns
          6. Text
          7. Transformation methods
          8. Pixel manipulation
        2. Drawing to the canvas
        3. Time for action – drawing to the canvas
          1. What just happened?
          2. Pop quiz – drawing to the canvas
          3. Have a go hero – creating the flag of your nation
        4. Canvas, IE, and the alternatives
          1. API methods that simply do not work
        5. Time for action – making our code compatible with IE
          1. What just happened?
          2. Pop Quiz – supporting IE
          3. Have a go hero – extending IE support
        6. Animating the canvas
        7. Time for action – creating an animation on the canvas
          1. What just happened?
        8. Time for action – animating the white crosses
          1. What just happened?
        9. Time for action – animating the red crosses
          1. What just happened?
          2. Pop quiz – animating the canvas
          3. Have a go hero – creating canvas animations
        10. Creating a canvas game
        11. Time for action – creating the initial page
          1. What just happened?
        12. Time for action – the initial script
          1. What just happened?
        13. Time for action – adding the aliens to the page
          1. What just happened?
        14. Time for action – moving the aliens
          1. What just happened?
        15. Time for action – adding handlers to control the ship
          1. What just happened?
          2. Pop quiz – creating canvas-based games
          3. Have a go hero – extending the space invaders clone
        16. Summary
      19. A. Pop Quiz Answers
        1. Chapter 1
          1. Basic animation with jQuery
        2. Chapter 2
          1. Using fadeIn
          2. Using fadeOut
          3. Using fadeToggle()
          4. Using fadeTo
          5. Using show and hide
        3. Chapter 3
          1. Viewing the queue
          2. Adding new items to the array
          3. Keeping the queue running
          4. Replacing the queue
          5. Stopping an animation
        4. Chapter 4
          1. Sliding elements down
          2. Sliding elements up
          3. Using slideToggle
          4. Using easing
          5. Fixing the flicker
        5. Chapter 5
          1. Creating an animated content-viewer
          2. Creating expanding images
          3. Creating a plugin
        6. Chapter 6
          1. Using the effect API
          2. Using show/hide logic
          3. Easing, color, and class animations
        7. Chapter 7
          1. Animating page scroll
          2. Implementing the parallax effect
          3. Creating a single-page website
          4. Implementing stop-motion animation with jQuery
        8. Chapter 8
          1. Implementing proximity animations
          2. Creating a marquee scroller
        9. Chapter 9
          1. Implementing CSS3 rotation
          2. Using the matrix
        10. Chapter 10
          1. Drawing to the canvas
          2. Supporting IE
          3. Animating the canvas
          4. Creating canvas-based games
      20. Index