You could add callbacks for all methods
of the API, but that??™s not as necessary. You can always execute your own function any time
you execute the API method. What you can??™t predict is when an animation is necessarily
started, stopped, or stepped??”thus the callbacks.
Let??™s add in the additional code, for which only the animate() function is shown (because
it??™s the only function that needs to be modifed):
CHAPTER 6 n VISUAL EFFECTS 136
function animate()
{
// what the new position will be
var newval = options.from - (step * interval);
// the step increments AFTER the comparison
// check if the property exists and if the step
// is 0 (the first step)
if(options.onStart && step == 0) options.onStart();
if(options.onStep) options.onStep();
if(step++ <= numsteps) {
// use Math.ceil to round to an integer and style
el.style[options.property] = Math.ceil(newval) + 'px';
}else{
el.style[options.property] = options.to + 'px';
if(options.onEnd) options.onEnd();
publicMethods.stop();
}
}
The options object now has some additional properties that you can pass in:
var options = {
element:document.getElementById('elementID'),
property:'height',
from: 0,
to: 200,
duration: 1000,
onStart: function(){ console.log('started') },
onStep: function(){ console.log('stepped') },
onEnd: function(){ console.log('ended') }
};
Keep in mind that console.log() was used within these functions only to track when the
calls get made.
Pages:
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209