jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
3 Managing Animations Like most of the methods that jQuery makes available to us, the effect, or animation, methods can be chained together in sequence, like this: jQuery(elements).fadeIn().slideDown() When several animation methods, such as fadeIn(), and so on, are chained together and called on the same element or collection of elements, they are placed into a queue to be executed one after the other in series rather than all executing simultaneously in parallel. The standard animation queue created for an animated element is called fx, although custom queues can easily be created. jQuery gives us several methods that make working with and manipulating an element's fx queue extremely easy. These methods include: clearQueue() delay() dequeue() queue() stop() The techniques that we'll learn in this chapter include: Viewing the items in an element's queue Counting the items in an element's queue Preventing queued effects from executing Delaying the start of the next effect in the queue
Managing Animations Replacing the existing queue with a new queue Calling the next function in a custom queue Stopping the current effect without executing the rest of the queue Globally disabling all animations Changing the frame rate of animations globally The jQuery object itself also contains several properties that can be useful when working with animations. These include: jQuery.fx.off jQuery.fx.interval The queue is not restricted to storing animation methods; other methods can also be added to the queue. We will only be looking at the queue() method from an animation perspective here. Working with the queue When several effects are chained together, the first effect is begun straight away. The remaining effects are stored as functions in an array in the element's fx queue. As the effects are stored in an array, we can call standard JavaScript array methods on it to manipulate it, and examine its properties to find out additional information about it. We can determine how many functions are in the queue by looking at the length property of the array, or we can call standard functions such as push(), pop(), or reverse() on it to perform various operations on the items (functions) in the array. It is unlikely that this would be required in most normal situations however. An important point to note about the queue is that the first effect method called on an element does not get stored in the queue, so the length of the queue at the start of the operation will always be one less than the total number of effect methods called on the element. The queue executes on a first-in-first-out basis, with the last function stored in the queue executing last. The default fx queue for an animated element will run automatically and each function contained within it will be called automatically by jQuery. The string inprogress is used as the first item in the default fx queue as a flag indicating that the queue is currently being run. [ 56 ]
- Page 25 and 26: Preface Have a go hero - heading Th
- Page 27 and 28: Preface Piracy Piracy of copyright
- Page 29 and 30: Introduction In addition to animate
- Page 31 and 32: Introduction When not to use animat
- Page 33 and 34: Introduction of the template file"
- Page 35 and 36: Introduction In the previous screen
- Page 37 and 38: Introduction Once our variables hav
- Page 40 and 41: 2 Fading Animations In this chapter
- Page 42 and 43: [ 21 ] Chapter 2 We can control the
- Page 44 and 45: The previous screenshot shows how t
- Page 46 and 47: [ 25 ] Chapter 2 Most of the styles
- Page 48 and 49: 2. What else can be passed into the
- Page 50 and 51: Time for action - creating the dial
- Page 52 and 53: [ 31 ] Chapter 2 For example, the a
- Page 54 and 55: Download from Wow! eBook The follo
- Page 56 and 57: [ 35 ] Chapter 2 The CSS is used mo
- Page 58 and 59: The fadeTo() method is used in the
- Page 60 and 61: [ 39 ] Chapter 2 #messageList table
- Page 62 and 63: [ 41 ] Chapter 2 What just happened
- Page 64 and 65: 2. What format can these arguments
- Page 66 and 67: } var el = $(this); if (el.css("fil
- Page 68 and 69: [ 47 ] Chapter 2 Usually these meth
- Page 70 and 71: Time for action - animations with s
- Page 72 and 73: Download from Wow! eBook [ 51 ] Ch
- Page 74 and 75: 2. Save the changes as toggle.html.
- Page 78 and 79: [ 57 ] Chapter 3 A custom queue tha
- Page 80 and 81: If we wish to see how many function
- Page 82 and 83: 2. What does the queue() method ret
- Page 84 and 85: [ 63 ] Chapter 3 The argument we su
- Page 86 and 87: [ 65 ] Chapter 3 We pass a callback
- Page 88 and 89: [ 67 ] Chapter 3 The first argument
- Page 90 and 91: Delaying queue execution [ 69 ] Cha
- Page 92 and 93: [ 71 ] Chapter 3 Also note that the
- Page 94 and 95: 4 Sliding Animations Another type o
- Page 96 and 97: Time for action - creating a slide-
- Page 98 and 99: [ 77 ] Chapter 4 header form input
- Page 100 and 101: Pop quiz - sliding elements down 1.
- Page 102 and 103: Download from Wow! eBook }); }); $
- Page 104 and 105: Toggling the slide [ 83 ] Chapter 4
- Page 106 and 107: [ 85 ] Chapter 4 } h2 { margin:0; p
- Page 108 and 109: [ 87 ] Chapter 4 The previous scree
- Page 110 and 111: Pop quiz - using slideToggle 1. Wha
- Page 112 and 113: [ 91 ] Chapter 4 Easing is a great
- Page 114 and 115: [ 93 ] Chapter 4 Home Articles J
- Page 116 and 117: [ 95 ] Chapter 4 3. Save this file
- Page 118 and 119: In the previous screenshot, we see
- Page 120 and 121: Pop quiz - fixing the flicker 1. Wh
- Page 122 and 123: 5 Custom Animations The predefined
- Page 124 and 125: An alternative syntax for animate()
Managing <strong>Animation</strong>s<br />
Replacing the existing queue with a new queue<br />
Calling the next function in a custom queue<br />
Stopping the current effect without executing the rest <strong>of</strong> the queue<br />
Globally disabling all animations<br />
Changing the frame rate <strong>of</strong> animations globally<br />
The <strong>jQuery</strong> object itself also contains several properties that can be useful when working<br />
with animations. These include:<br />
<strong>jQuery</strong>.fx.<strong>of</strong>f<br />
<strong>jQuery</strong>.fx.interval<br />
The queue is not restricted to storing animation methods; other methods can<br />
also be added to the queue. We will only be looking at the queue() method<br />
from an animation perspective here.<br />
Working with the queue<br />
When several effects are chained together, the first effect is begun straight away. The<br />
remaining effects are stored as functions in an array in the element's fx queue. As the<br />
effects are stored in an array, we can call standard JavaScript array methods on it to<br />
manipulate it, and examine its properties to find out additional information about it.<br />
We can determine how many functions are in the queue by looking at the length property<br />
<strong>of</strong> the array, or we can call standard functions such as push(), pop(), or reverse() on<br />
it to perform various operations on the items (functions) in the array. It is unlikely that this<br />
would be required in most normal situations however.<br />
An important point to note about the queue is that the first effect method called on an<br />
element does not get stored in the queue, so the length <strong>of</strong> the queue at the start <strong>of</strong><br />
the operation will always be one less than the total number <strong>of</strong> effect methods called on<br />
the element.<br />
The queue executes on a first-in-first-out basis, with the last function stored in the queue<br />
executing last. The default fx queue for an animated element will run automatically<br />
and each function contained within it will be called automatically by <strong>jQuery</strong>. The string<br />
inprogress is used as the first item in the default fx queue as a flag indicating that the<br />
queue is currently being run.<br />
[ 56 ]
Change language