Book Image

Mastering jQuery

By : Alex Libby
Book Image

Mastering jQuery

By: Alex Libby

Overview of this book

<p>Mastering jQuery has been written not only to help maximize your skills with core functionality in the library, but also to explore some of the more intriguing ways of using the library to achieve real-world solutions that could feature on any website or online environment.</p> <p>You'll start with a look at some of the more advanced ways to incorporate the library into your pages, followed by working with forms and advanced form validation using regular expressions. Next you'll move on to animating in jQuery, advanced event handling, and using jQuery effects.</p> <p>Finally, you will develop practical examples of using jQuery with external functionality such as node-webkit, before finishing with a session on optimizing your version of the library for maximum efficiency and exploring best practices for using QUnit.</p>
Table of Contents (21 chapters)
Mastering jQuery
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Designing custom animations


If you've spent any time developing jQuery code that animates objects or elements on a page, you will no doubt have used either the jQuery UI or possibly a plugin, such as jQuery Easing, created by George Smith (http://gsgd.co.uk/sandbox/jquery/easing/).

Both are great ways of animating objects on a page, using easing methods such as easeIn() or easeOutShine(). The trouble is that both require the use of plugins, which add unnecessary baggage to our code; they are also a very safe way of achieving the effect we need. What if I said we don't need either and can produce the same effects just by using jQuery itself?

Before I go through how to do this, let's take a look at a working demo that shows this in action:

  1. Let's make a start by extracting the relevant files from the code download that accompanies this book—for this demo, we will need copies of the following:

    • customanimate.html: Save this file in the root area of our project folder

    • customanimate.css: Save this...