jQuery 1.4 Animation Techniques: Beginners Guide

Book Image

jQuery 1.4 Animation Techniques: Beginners Guide

Book Image

jQuery 1.4 Animation Techniques: Beginners Guide

Overview of this book

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

jQuery 1.4 Animation Techniques Beginner's Guide

jQuery 1.4 Animation Techniques Beginner's Guide

Credits

Foreword

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Introduction

Animation on the Web

The power of animated UIs

Animating with jQuery

The template file

A basic animation example

Time for action – creating an animated loader

Fading Animations

Fading Animations

Fading animations

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()

Time for action – creating the example page

Time for action – adding the behavior

Time for action – fading table-rows in IE

Showing and hiding

Time for action – animations with show/hide

Time for action – replacing show and hide with toggle

Managing Animations

Managing Animations

Working with the queue

Time for action - viewing the queue

Time for action – adding a single function to the queue

Time for action – keeping the queue running

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

Sliding Animations

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

Time for action – adding 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

Custom Animations

Custom Animations

The animate method

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

Extended Animations with jQuery UI

Extended Animations with jQuery UI

Obtaining and setting up jQuery UI

The new effects added by jQuery UI

Time for action – using the bounce effect

Time for action – highlighting elements

Time for action – making an element pulsate

Time for action – shaking an element

Time for action – resizing elements

Time for action – transferring the outline of one element to another

Using effects with show and hide logic

Time for action – using the blind effect

Time for action – clipping an element in and out

Time for action – using the effect

Time for action – exploding an element

Time for action – folding an element away

Time for action – making an element disappear in a puff

Time for action – sliding elements in and out of view

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

Full Page Animations

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

Time for action – creating the stage and adding the styling

Time for action – animating the background position

Animated single-page navigation

Time fr action – creating individual pages and adding the styles

Time for action – adding the scroll navigation

Stop-motion animation

Time for action – adding the markup and styling

Time for action – creating the frames and running the animation

Other Popular Animations

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

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

CSS3 Animations

CSS3 Animations

CSS3 2D transforms

CSS3 3D transforms

Animated rotation with jQuery and CSS3

Time for action – animating an element's rotation

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

Canvas Animations

Canvas Animations

Drawing to the canvas

Time for action – drawing to the canvas

Canvas, IE, and the alternatives

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

Pop Quiz Answers

Pop Quiz Answers

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action – using the blind effect

I mentioned earlier that the effect is reminiscent of a window blind rolling up or down, so let's base our next example on that:

In the <body> of the template file add the following code:

<div id="window">
  <div id="blind"><!-- --></div>
</div>

Implement the effect with the following script:

$("#window").click(function() {
  $("#blind").toggle("blind");
});

Save this file as blind.html. The stylesheet for this example is as follows:

#window {
  width:464px; height:429px; position:relative; cursor:pointer;
  background:url(../img/window.jpg) no-repeat 0 0;
}
#blind {
  display:none; width:332px; height:245px; position:absolute;
  left:64px; top:113px;
  background:url(../img/blind.png) no-repeat 0 100%;
}

Save this as blind.css in the css folder.
When we run the page in a browser, the blind should alternately roll down and up each time the window is clicked:

The previous screenshot shows the blind in its fully-open state...