As covered in Chapter 1, console.log() is a debugging technique that??™s not
available in all browsers including Internet Explorer (IE) or Opera.
Queuing Animations
Queuing animations enables you to set up a sequence of events. To do this, you can actually
take advantage of the callbacks made available to you within the animation object to script a
number of animations to occur.
Let??™s say you have three elements side by side that you want to reveal one at a time. To do
so, simply set the onEnd callback on the first object to start the animation on the second object,
and set the onEnd callback on the second object to start the animation on the third object. Just
like that, they??™ll cascade through until the end:
CHAPTER 6 n VISUAL EFFECTS 137
var options1 = {
element:document.getElementById('element1'),
property:'height',
from: 0,
to: 200,
duration: 1000,
onEnd: function(){ a2.start(); }
};
var a1 = new Animation( options1 );
var options2 = {
element: document.getElementById('element2'),
property:'height',
from: 0,
to: 200,
duration: 1000,
onEnd: function(){ a3.start(); }
};
var a2 = new Animation( options2 );
var options3 = {
element: document.getElementById('element3'),
property:'height',
from: 0,
to: 200,
duration: 1000
};
var a3 = new Animation( options3 );
// start everything
a1.start();
This code creates a sequence that looks similar to Figure 6-3.
CHAPTER 6 n VISUAL EFFECTS 138
Figure 6-3.
Pages:
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210