element);
if(!el) return false;
var fps = 30;
// stores which step we're on
var step = 0;
// determines the total number of steps
var numsteps = options.duration / 1000 * fps;
// determines the interval between each step
var interval = (options.from - options.to) / numsteps;
var intervalID;
function animate()
{
// what the new position will be
var newval = options.from - (step * interval);
// the step increments AFTER the comparison
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';
publicMethods.stop();
}
}
var publicMethods = {
start:function(){
intervalID = setInterval(animate, 1000 / fps);
},
stop:function(){
clearInterval(intervalID);
},
CHAPTER 6 n VISUAL EFFECTS 135
gotoStart:function(){
step = 0;
el.style[options.property] = options.from + 'px';
},
gotoEnd:function(){
step = numsteps;
el.style[options.property] = options.to + 'px';
}
}
return publicMethods;
}
The interval variable was moved up to the top, so it??™s with the rest of the variables. The
declaration is not moved to the start() function because you still need closures to be able to
access that variable in the stop() method. The other thing you??™ll notice is that the animate()
function now runs the stop() method instead of just clearing the interval. This keeps all ???stop???
logic in one place, which will be important as you continue to extend the API.
Pages:
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207