jQuery 1.4 Animation Techniques - Index of

context.closePath();
pos.ne.x = pos.ne.x - 2;
pos.ne.y = pos.ne.y - 1;
pos.se.x = pos.se.x - 2;
pos.se.y = pos.se.y + 1;
pos.nw.x = pos.nw.x + 2;
pos.nw.y = pos.nw.y + 1;
pos.sw.x = pos.sw.x + 2;
pos.sw.y = pos.sw.y - 1;
} else {
clearInterval(crossInt);
redCross(context);
}
},
growVertical = function() {
if (height < 200 || width < 400) {
if (height < 200) {
height = height + 2;
context.fillRect(225, 50, 50, height);
}
if (width < 400) {
width = width + 4;
context.fillRect(50, 125, width, 50);
}
} else {
clearInterval(rectInt);
crossInt = setInterval(function() { growDiagonal() }, 1);
}
},
rectInt = setInterval(function() { growVertical() }, 1);
},
[ 285 ]
Chapter 10
What just happened?
Essentially we have another inline function, which contains another function that gets
repeatedly called with another interval. As we're drawing white crosses this time, we need to
set some style properties (we'll be drawing both lines and rectangles in this function and so
set the fillStyle and strokeStyle) as well as the lineWidth property.
We initialize width and height control variables, which will be used to control how many
times the interval runs, and we also store the starting positions of the vertical and diagonal
crosses in an object called pos.