jQuery 1.4 Animation Techniques: Beginners Guide


jQuery 1.4 Animation Techniques: Beginners Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • Create both simple and complex animations using clear, step-by-step instructions, accompanied with screenshots
  • Walk through 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

Book Details

Language : English
Paperback : 344 pages [ 235mm x 191mm ]
Release Date : March 2011
ISBN : 1849513309
ISBN 13 : 9781849513302
Author(s) : Dan Wellman
Topics and Technologies : All Books, Web Development, AJAX, Beginner's Guides, jQuery, Open Source

Table of Contents

Preface
Chapter 1: Introduction
Chapter 2: Fading Animations
Chapter 3: Managing Animations
Chapter 4: Sliding Animations
Chapter 5: Custom Animations
Chapter 6: Extended Animations with jQuery UI
Chapter 7: Full Page Animations
Chapter 8: Other Popular Animations
Chapter 9: CSS3 Animations
Chapter 10: Canvas Animations
Pop Quiz Answers
Index
  • Chapter 1: Introduction
    • Animation on the Web
    • The power of animated UIs
      • When to use animations
      • When not to use animations
      • Animation checklist
    • Animating with jQuery
    • The template file
      • Creating a project folder
    • A basic animation example
    • Time for action – creating an animated loader
    • Summary
    • Chapter 2: Fading Animations
      • Fading animations
        • Configuring the animations with arguments
        • jQuery's Unified Animation API
        • Enhancing simple CSS hover states with fadeIn
      • Time for action – adding the underlying markup and styling
      • Time for action – scripting the animation
      • Fading elements out
      • Time for action – creating the dialog
      • Fading PNGs in IE
      • Using fadeToggle() for convenient state-checking logic
      • Time for action – showing and hiding with fadeToggle()
      • Greater opacity control with fadeTo()
        • Animating to partial opacity
      • Time for action – creating the example page
      • Time for action – adding the behavior
        • Fading table-rows in Internet Explorer
      • Time for action – fading table-rows in IE
      • Showing and hiding
        • Flyout submenus with jQuery's show/hide logic
      • Time for action – animations with show/hide
        • Animated toggling
      • Time for action – replacing show and hide with toggle
      • Summary
      • Chapter 3: Managing Animations
        • Working with the queue
          • Viewing the queue
        • Time for action - viewing the queue
          • Adding a function to the queue
        • Time for action – adding a single function to the queue
          • Using a callback function to keep the queue moving
        • Time for action – keeping the queue running
          • Replacing the queue
        • Time for action – replacing the queue
        • Ensuring custom queues iterate correctly
        • Time for action – dequeueing functions
        • Stopping an animation
        • Time for action – preventing animation build-up using the stop method
        • Delaying queue execution
        • Clearing the queue
        • Useful properties of the jQuery object
          • Globally disabling animations
          • Changing the default frame rate
        • Summary
        • Chapter 4: Sliding Animations
          • Sliding elements into view
          • Time for action – creating a slide-down login form
          • Sliding elements out of view
          • Time for action – sliding elements up
          • Toggling the slide
          • Time for action – using slideToggle
          • Easing
          • Time for action – adding easing
            • Using an object literal to add easing
          • Time for action – using the alternative argument format
          • The flicker effect
          • Time for action – avoiding the flicker effect
          • Time for action – fixing the flicker
          • Summary
          • Chapter 5: Custom Animations
            • The animate method
              • Per-property easing
              • An alternative syntax for animate()
            • Animating an element's position
            • Time for action – creating an animated content viewer
            • Time for action – initializing variables and prepping the widget
            • Time for action – defining a post-animation callback
            • Time for action – adding event handlers for the UI elements
            • Skinning the widget
            • Time for action – adding a new skin
            • Time for action – creating the underlying page and basic styling
            • Time for action – defining the full and small sizes of the images
            • Time for action – creating the overlay images
            • Time for action – creating the overlay wrappers
            • Time for action – maintaining the overlay positions
            • Creating a jQuery animation plugin
            • Time for action – creating a test page and adding some styling
            • Creating the plugin
            • Time for action – adding a license and defining configurable options
            • Time for action – adding our plugin method to the jQuery namespace
            • Time for action – creating the UI
            • Time for action – creating the transition overlay
            • Time for action – defining the transitions
            • Using the plugin
            • Summary
            • Chapter 6: Extended Animations with jQuery UI
              • Obtaining and setting up jQuery UI
                • A new template file
              • The new effects added by jQuery UI
                • Using the effect API
                • The bounce effect
                  • Configuration options
              • Time for action – using the bounce effect
                • The highlight effect
                  • Configuration options
              • Time for action – highlighting elements
                • The pulsate effect
                  • Configuration options
              • Time for action – making an element pulsate
                • The shake effect
                  • Configuration options
              • Time for action – shaking an element
                • The size effect
                  • Configuration options
              • Time for action – resizing elements
                • The transfer effect
                  • Configuration options
              • Time for action – transferring the outline of one element to another
              • Using effects with show and hide logic
                • The blind effect
                  • Configuration options
              • Time for action – using the blind effect
                • The clip effect
                  • Configuration options
              • Time for action – clipping an element in and out
                • The drop effect
                  • Configuration options
              • Time for action – using the effect
                • The explode effect
                  • Configuration options
              • Time for action – exploding an element
                • The fold effect
                  • Configuration options
              • Time for action – folding an element away
                • The puff effect
                  • Configuration options
              • Time for action – making an element disappear in a puff
                • The slide effect
                  • Configuration options
              • Time for action – sliding elements in and out of view
                • The scale effect
                  • Configuration options
              • Time for action – scaling an element
              • Easing functions
              • Time for action – adding easing to effects
              • Color animations
              • Time for action – animating between colors
              • Class transitions
              • Time for action – transitioning between classes
              • Summary
              • Chapter 7: Full Page Animations
                • Animated page scroll
                • Time for action – creating the page that will scroll and its styling
                • Time for action – animating the scroll
                • The illusion of depth with parallax
                  • A little help from the new cssHooks functionality
                • Time for action – creating the stage and adding the styling
                • Time for action – animating the background position
                • Animated single-page navigation
                • Time for action – creating individual pages and adding the styles
                • Time for action – adding the scroll navigation
                • Stop-motion animation
                  • Imagery
                  • Technique
                • Time for action – adding the markup and styling
                • Time for action – creating the frames and running the animation
                • Summary
                • Chapter 8: Other Popular Animations
                  • Proximity animations
                  • Time for action – creating and styling the page
                  • Time for action – prepping the page for sliding functionality
                  • Time for action – animating the scroller
                  • Time for action – adding the mouse events
                  • Time for action – adding keyboard events
                  • Animated page headers
                  • Time for action – creating an animated header
                  • Marquee text
                  • Time for action – creating and styling the underlying page
                  • Time for action – retrieving and processing the post list
                  • Time for action – animating the post links
                  • Summary
                  • Chapter 9: CSS3 Animations
                    • CSS3 2D transforms
                      • Understanding the matrix
                        • Translate
                        • Scale
                        • Skew
                        • Rotation
                      • Working with transforms
                      • jQuery and transforms
                      • Internet Explorer transforms
                    • CSS3 3D transforms
                    • Animated rotation with jQuery and CSS3
                    • Time for action – animating an element's rotation
                      • Problems with IE
                    • Animated skewing
                    • Time for action – creating the underlying markup
                    • and basic styling
                    • Time for action – initializing the widget
                    • Time for action – animating an element's skew
                    • Time for action – skewing an element from left to right
                    • Time for action – wiring up the controls
                    • Summary
                    • Chapter 10: Canvas Animations
                      • The canvas API
                        • The canvas element
                        • Context methods
                        • Native shapes
                        • Paths
                        • Images and patterns
                        • Text
                        • Transformation methods
                        • Pixel manipulation
                      • Drawing to the canvas
                      • Time for action – drawing to the canvas
                      • Canvas, IE, and the alternatives
                        • API methods that simply do not work
                      • Time for action – making our code compatible with IE
                      • Animating the canvas
                      • Time for action – creating an animation on the canvas
                      • Time for action – animating the white crosses
                      • Time for action – animating the red crosses
                      • Creating a canvas game
                      • Time for action – creating the initial page
                      • Time for action – the initial script
                      • Time for action – adding the aliens to the page
                      • Time for action – moving the aliens
                      • Time for action – adding handlers to control the ship
                      • Summary
                      • Pop Quiz Answers
                        • Chapter 1
                          • Basic animation with jQuery
                        • Chapter 2
                          • Using fadeIn
                          • Using fadeOut
                          • Using fadeToggle()
                          • Using fadeTo
                          • Using show and hide
                        • Chapter 3
                          • Viewing the queue
                          • Adding new items to the array
                          • Keeping the queue running
                          • Replacing the queue
                          • Stopping an animation
                        • Chapter 4
                          • Sliding elements down
                          • Sliding elements up
                          • Using slideToggle
                          • Using easing
                          • Fixing the flicker
                        • Chapter 5
                          • Creating an animated content-viewer
                          • Creating expanding images
                          • Creating a plugin
                        • Chapter 6
                          • Using the effect API
                          • Using show/hide logic
                          • Easing, color, and class animations
                        • Chapter 7
                          • Animating page scroll
                          • Implementing the parallax effect
                          • Creating a single-page website
                          • Implementing stop-motion animation with jQuery
                        • Chapter 8
                          • Implementing proximity animations
                          • Creating a marquee scroller
                        • Chapter 9
                          • Implementing CSS3 rotation
                          • Using the matrix
                        • Chapter 10
                          • Drawing to the canvas
                          • Supporting IE
                          • Animating the canvas
                          • Creating canvas-based games

                        Dan Wellman

                        Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

                        Code Downloads

                        Download the code and support files for this book.


                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        Errata

                        - 3 submitted: last submission 17 Aug 2013

                        Errata type: Typo | Page number: 303

                        The answer to Chapter 2, FadeIn quiz, question 1 is C.

                        (in the book it says the correct answer is b which is incorrect)

                        Errata type: Code | Page number: 40

                        $("#overlay button").click(function() {
                        $("#overlay").fadeOut(500, function() {
                        $(this).remove();
                        });
                        });

                        should be:

                        $("#dialog button").click(function() {
                        $("#dialog").fadeOut(500, function() {
                        $(this).remove();
                        });
                        });

                         

                        Errata type: Code | Page number: 160

                        The code line in the third numbered bullet:
                        #confirmation { display:none width:100%;
                        should be
                        #confirmation { display:none; width:100%;

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        jQuery 1.4 Animation Techniques: Beginners Guide +    Flash Facebook Cookbook =
                        50% Off
                        the second eBook
                        Price for both: €26.30

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • Implement subtle UI effects, user-triggered animations and full-page feature animations to animate the user interface of your web applications
                        • Fade, hide, shrink, and slide your animations using jQuery’s built-in animation helper methods
                        • Create custom animations using jQuery’s animate() method
                        • Discover how the animation queue works and how it can be manipulated to create complex animations
                        • Simulate animation in a variety of ways using other non-animation-specific jQuery methods
                        • Discover how jQuery can be used to make the latest CSS3 and canvas animations work cross-browser
                        • Obtain and set up jQuery UI— the official user interface library for jQuery
                        • Define custom animations that can be complex and specialized
                        • Extend the jQuery library with brand new functions and methods in the form of plugins
                        • Get your images scrolled in a certain direction, and at a certain speed, depending on the movements of the mouse pointer
                        • Create a continuous header animation manually with just a few lines of code

                         

                        In Detail

                        Master animation in jQuery to produce slick and attractive interfaces that respond to your visitors' interactions

                        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 will provide you with...

                        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

                        This book and eBook will enable you to learn how to create engaging and interactive user interfaces, and attractive special effects using jQuery

                        Approach

                        All the concepts in the book are explained in a simple, easy to understand, step-by-step manner. There are plenty of examples and images used in this book, with the images properly explained. Written with a friendly and engaging approach, this Packt Beginner's guide is designed to be placed alongside the computer as your guide and mentor to create attractive web page animations using jQuery.

                        Who this book is for

                        This book is written for web designers and front-end developers who already have good knowledge of HTML and CSS, and some experience with jQuery. If you want to learn how to animate the user interface of your web applications with jQuery, then this book is for you.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Resources
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software