jQuery 1.4 Animation Techniques Beginner''''s Guide pptx

www.it-ebooks.info jQuery 1.4 Animation Techniques Beginner's Guide Quickly master all of jQuery's animaon methods and build a toolkit of ready-to-use animaons 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 transmied in any form or by any means, without the prior wrien permission of the publisher, except in the case of brief quotaons embedded in crical arcles or reviews. Every eort has been made in the preparaon of this book to ensure the accuracy of the informaon presented. However, the informaon 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 informaon about all of the companies and products menoned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this informaon. First published: March 2011 Producon 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 Acquision 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 Producon Coordinator Melwyn D'sa Cover Work Melwyn D'sa www.it-ebooks.info Foreword Since the rst jQuery homepage in 2006, an interacve example introduced visitors to jQuery with a single line of code, and a buon 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 documentaon has 15 methods listed in the Eects category. These provide built-in animaons for fading and sliding, as well as various ways to create custom animaons. When combined with color and class animaons and custom easings that jQuery UI provides, there are even more ways to create animaons. A good rule of thumb for using animaons is to use slides when showing elements within the pageow, and fades for overlays, like a toolp. But that's just a rule of thumb, and with all the tools available there's a lot more opportunity to improve interacons, as well as messing them up. With that in mind, a full book on animaons 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 animaons 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 sll guring out the scope and exact direcon of the project, including several direcon changes at the me when Dan was wring the rst book. Despite these challenges Dan did a great job providing documentaon and extensive examples on how to use and combine the widgets and interacons jQuery UI provides. With this book Dan brings his experience in wring on jQuery topics to teach you when and how to use animaons to create beer user experiences. I hope it serves you well. Jörn Zaeerer 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 beauful wife, and a close circle of family and friends. This is his h book. I would like to thank the hugely supporve and paent 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 parcular 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 graduaon in Computer Science and Engineering (CSE) from IIUC (Internaonal Islamic University Chiagong), and loves web development and PHP. He is a Soware 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 moo is: Work through best approach, commitment, skill, and keep smiling. Currently he is working for "bGlobal Sourcing LLC" as a Soware 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 inspiraon. Special thanks to everyone at Packt Publishing. Ben Nadel is the chief soware engineer at Epicenter Consulng, a Manhaan-based web applicaon development rm specializing in innovave custom soware that transforms the way its clients do business. He is also an Adobe Community Professional as well as an Adobe Cered Professional in Advanced ColdFusion. In his spare me, he blogs extensively about all aspects of obsessively thorough web applicaon 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 telecommunicaons for the past 12 years. He is married and a father of a lovely baby girl. I would actually like to thank Twier 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 Twier previously to realizing I was reviewing one of his books. This is an amazing piece that draws inspiraon and Dan is the most cheerful, open minded, and supporve person. Finally thanks to my wife who showed quite some paence and support when I kept working on this book aer 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 oers 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 entled 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 collecon of free technical arcles, sign up for a range of free newsleers and receive exclusive discounts and oers on Packt books and eBooks. http://PacktLib.PacktPub.com Do you need instant soluons to your IT quesons? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's enre 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 enrely free books. Simply use your login credenals 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 . seng up jQuery UI 13 8 A new template le 13 9 The new eects added by jQuery UI 13 9 Using the eect API 14 0 The bounce eect 14 1 Conguraon opons 14 1 Time. animaons 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