www.it-ebooks.info jQuery 1.4 Animation Techniques Beginner's Guide Quickly master all of jQuery's animaon methods and build a toolkit of ready-to-use animaons using jQuery 1.4 Dan Wellman BIRMINGHAM - MUMBAI www.it-ebooks.info jQuery 1.4 Animation Techniques Beginner's Guide Copyright © 2011 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmied in any form or by any means, without the prior wrien permission of the publisher, except in the case of brief quotaons embedded in crical arcles or reviews. Every eort has been made in the preparaon of this book to ensure the accuracy of the informaon presented. However, the informaon contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark informaon about all of the companies and products menoned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this informaon. First published: March 2011 Producon Reference: 1140311 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849513-30-2 www.packtpub.com Cover Image by Filippo (Filosarti@tiscali.it) www.it-ebooks.info Credits Author Dan Wellman Reviewers Shaiful Islam Ben Nadel Cyril Pierron Acquision Editor Sarah Cullington Development Editor Roger D'souza Technical Editor Conrad Sardinha Indexer Hemangini Bari Editorial Team Leader Akshara Aware Project Team Leader Priya Mukherji Project Coordinator Sneha Harkut Proofreader Aaron Nash Producon Coordinator Melwyn D'sa Cover Work Melwyn D'sa www.it-ebooks.info Foreword Since the rst jQuery homepage in 2006, an interacve example introduced visitors to jQuery with a single line of code, and a buon to run that code. When clicked, it added a class to a hidden paragraph, and animated that paragraph to become visible. Today, in late 2010, the API documentaon has 15 methods listed in the Eects category. These provide built-in animaons for fading and sliding, as well as various ways to create custom animaons. When combined with color and class animaons and custom easings that jQuery UI provides, there are even more ways to create animaons. A good rule of thumb for using animaons is to use slides when showing elements within the pageow, and fades for overlays, like a toolp. But that's just a rule of thumb, and with all the tools available there's a lot more opportunity to improve interacons, as well as messing them up. With that in mind, a full book on animaons starts to make a lot of sense. It makes even more sense when also taking into account upcoming technologies which aren't bound to jQuery directly, like CSS3 animaons or animated canvas drawings. As a tech reviewer I've worked with Dan on his jQuery UI 1.6 and jQuery UI 1.7 books. At the me the jQuery UI team was sll guring out the scope and exact direcon of the project, including several direcon changes at the me when Dan was wring the rst book. Despite these challenges Dan did a great job providing documentaon and extensive examples on how to use and combine the widgets and interacons jQuery UI provides. With this book Dan brings his experience in wring on jQuery topics to teach you when and how to use animaons to create beer user experiences. I hope it serves you well. Jörn Zaeerer jQuery UI development lead, plugin author, and QUnit maintainer www.it-ebooks.info About the Author Dan Wellman is an author and web developer based on the South coast of the UK. By day he works alongside some of the most talented people he has had the pleasure of calling colleagues, for a small, yet accomplished digital agency called Design Haus. By night he writes books and tutorials on a range of frontend topics. He is hopelessly addicted to jQuery. His life is enriched by four wonderful children, a beauful wife, and a close circle of family and friends. This is his h book. I would like to thank the hugely supporve and paent editorial team at Packt, without whom this book would not exist. I would also like to thank the reviewers, especially Ben Nadel and Cyril Pierron, who put aside their own personal projects and dedicated countless hours to ensuring the book's technical accuracy. I'd also like to say a big Hey! to some of my closest friends, in no parcular order; Andrew Herman, Steev Bishop, Aaron Matheson, Eamon O'Donoghue, James Zabiela, Mike Woodford, and John Adams. www.it-ebooks.info About the Reviewers Shaiful Islam completed his graduaon in Computer Science and Engineering (CSE) from IIUC (Internaonal Islamic University Chiagong), and loves web development and PHP. He is a Soware Engineer, with three years of experience in web development and a keen lover of web technology. He also loves CSS, JQuery, CodeIgniter, Cakephp, and Zend Framework, which showed him the way to develop his career in web development and the programming eld. His moo is: Work through best approach, commitment, skill, and keep smiling. Currently he is working for "bGlobal Sourcing LLC" as a Soware Engineer. I would like to thank all of my friends, colleagues, and those senior brothers who reviewed this type of book before and from whom I got inspiraon. Special thanks to everyone at Packt Publishing. Ben Nadel is the chief soware engineer at Epicenter Consulng, a Manhaan-based web applicaon development rm specializing in innovave custom soware that transforms the way its clients do business. He is also an Adobe Community Professional as well as an Adobe Cered Professional in Advanced ColdFusion. In his spare me, he blogs extensively about all aspects of obsessively thorough web applicaon development at http://www. bennadel.com/ . www.it-ebooks.info Cyril Pierron is an engineer, a web addict, tech savvy, and life curious. He started programming at age 8, and has been working in telecommunicaons for the past 12 years. He is married and a father of a lovely baby girl. I would actually like to thank Twier which gave me the opportunity to see Packt Publishing message when they were looking for reviewers. Obviously thanks to the Packt Publishing team for giving me the chance to work on one of their tles. Lots of thanks to Dan Wellman who I actually followed on Twier previously to realizing I was reviewing one of his books. This is an amazing piece that draws inspiraon and Dan is the most cheerful, open minded, and supporve person. Finally thanks to my wife who showed quite some paence and support when I kept working on this book aer hours. www.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt oers eBook versions of every book published, with PDF and ePub les available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collecon of free technical arcles, sign up for a range of free newsleers and receive exclusive discounts and oers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's enre library of books. Why Subscribe? Fully searchable across every book published by Packt Copy and paste, print and bookmark content On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine enrely free books. Simply use your login credenals for immediate access. www.it-ebooks.info www.it-ebooks.info [...]... Introduction 1 7 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 7 8 9 10 10 10 11 13 13 14 17 19 Fading animations Configuring the animations with arguments jQuery' s... easy-to-understand steps mentioned in it jQuery 1.4 Animation Techniques: Beginner's 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,... to use animation, how animation can enhance an interface, and the animation methods exposed by jQuery A basic example of animation is also covered Chapter 2, Fading Animations looks at the fading family of animation methods including fading elements in and out, fade toggling, triggering animations with show(), hide(), and toggle(), and fading an element to a specific opacity Chapter 3, Managing Animations... the jQuery 1.4 Animation Techniques: Beginner's Guide book Over the course of the book we'll look at each and every method that produces or controls animations available in the jQuery JavaScript library We'll see how the methods are used, the arguments they are able to accept, and the different behavior they produce We'll also look at how to use a range of accompanying resources including selected jQuery. .. basic stop-motion animations Chapter 8, Other Popular Animations looks at some common types of animations found on the web including proximity animations triggered by the mouse pointer, animated headers, and a modern-day equivalent to the marquee element Chapter 9, CSS3 Animations covers how we can use CSS3 to create attractive animations driven by the latest CSS transforms and how jQuery can be used... from the online community, including jQuery UI, the official UI library for jQuery, which extend jQuery' s animation capabilities Natively, jQuery provides methods that add sliding and fading behavior with minimal configuration, and which work cross-browser It also exposes methods related to managing the animation queue, and provides a means for creating custom animations that [ 10 ] www.it-ebooks.info... attractive animations Chapter 6, Extended Animations with jQuery UI looks at the additional effects added by jQuery UI, the official UI library built on top of jQuery We look at each of the 14 new effects as well as covering the easing functions built into the library Chapter 7, Full Page Animations looks at animations that form the main focus of the page Techniques we cover include animating page scroll,... 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... Chapter 3, Managing Animations covers the animation queue and the methods jQuery provides for managing it We see how to clear the queue, how to add functions to it, and how to clear it We see how to add a delay between queued items and how to prevent animations building up in the queue when they are not required Chapter 4, Sliding Animations looks at jQuery' s sliding animation and covers how to slide elements... accompanying resources including selected jQuery plugins and the jQuery UI library In this introductory chapter, we'll look at the following topics: A brief history of animation on the Web Why animating your UIs is important Animation methods provided by jQuery The template file used by each of the examples A basic animation example Animation on the Web In 1989 Compuserve released GIF89A, an . seng up jQuery UI 13 8 A new template le 13 9 The new eects added by jQuery UI 13 9 Using the eect API 14 0 The bounce eect 14 1 Conguraon opons 14 1 Time. animaons using jQuery 1. 4 Dan Wellman BIRMINGHAM - MUMBAI www.it-ebooks.info jQuery 1. 4 Animation Techniques Beginner's Guide Copyright © 2 011 Packt Publishing All