jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 57 ] Chapter 3 A custom queue that we create ourselves will not run automatically and we must ensure that each item in the queue is executed one after the other. jQuery provides several ways of doing this including the dequeue() method, which executes the next function in the queue, and a callback function that we can pass into functions in the queue. We'll look at both of these techniques later in the chapter. Viewing the queue To view the queue we simply call the queue() method; no arguments are required but we can optionally supply the queue name if it differs from the default fx. When the method is called, it returns an array containing the remaining functions in the queue. The queue() method may be used in the following form: jQuery(elements).queue([queue name], [new queue], [callback]); In addition to the name of the queue, we can also supply either a new queue, or a single callback function. The new queue, if supplied, should take the form of an array of functions. The new queue will replace the existing queue entirely. Passing an empty array to the queue() method will clear the queue. A callback passed to the queue() method will be added to the end of the queue and executed last after the functions originally in the queue. A common use of the queue() method is to look at the length property of the returned array to determine how many functions are left to run; but if we need to, we can also look at each function individually by calling the toString() JavaScript function on any item in the array (except for item 0 which will simply display the string inprogress). Most functions in the returned array are function literals, however, the "next" item in the queue is not available via the queue() method. The contents of item 0 in the default fx queue will always be the string inprogress as this is the animation currently being run. Time for action - viewing the queue Let's look at a basic example of the use of the queue() method and the type of results we can expect to obtain. 1. In the of our template file add the following code: #fader { width:100px; height:100px; background-color:#000; }
Managing Animations 2. Finally, in the anonymous function at the bottom of the second element, add the following code: $("#fader").fadeOut(function() { console.log($(this).queue()); }).fadeIn().fadeOut().fadeIn(); 3. Save the page as queue.html. What just happened? Typically, we'd use an external stylesheet for any styling, but for a single selector and three rules, it seems pointless creating a separate file. In the script we have four effects chained together to form a simple animation in which our element is simply faded out and back in twice. We provide a callback function as an argument to the first of our effect methods, within which we call the queue() method. You'll need to use a browser that has a console for this example, such as Firefox. Here's what the output looks like in Firebug: In the previous screenshot, we can see that the array making up the queue has been output to the console for us to view. There are three items left in the queue when the method is called. The first item in the array is the string inprogress. The remaining two items are the queued methods that have not yet run. [ 58 ]
- 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 76 and 77: 3 Managing Animations Like most of
- 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()
- Page 126 and 127: [ 105 ] Chapter 5 width:295px; marg
Managing <strong>Animation</strong>s<br />
2. Finally, in the anonymous function at the bottom <strong>of</strong> the second element,<br />
add the following code:<br />
$("#fader").fadeOut(function() {<br />
console.log($(this).queue());<br />
}).fadeIn().fadeOut().fadeIn();<br />
3. Save the page as queue.html.<br />
What just happened?<br />
Typically, we'd use an external stylesheet for any styling, but for a single selector and three<br />
rules, it seems pointless creating a separate file. In the script we have four effects chained<br />
together to form a simple animation in which our element is simply faded out and<br />
back in twice. We provide a callback function as an argument to the first <strong>of</strong> our effect<br />
methods, within which we call the queue() method.<br />
You'll need to use a browser that has a console for this example, such as Firefox. Here's what<br />
the output looks like in Firebug:<br />
In the previous screenshot, we can see that the array making up the queue has been output<br />
to the console for us to view. There are three items left in the queue when the method is<br />
called. The first item in the array is the string inprogress. The remaining two items are the<br />
queued methods that have not yet run.<br />
[ 58 ]
Change language