(^240) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
FIGURE 8-4
When you click the Grow button, the animate() method animates a transition in the <div> with the
id name exampleDialog from the width, height, and margin that are specifi ed in the style sheet.$('div#exampleDialog').animate(
{
width : '400px',
height : '350px',
marginLeft : '-210px',
marginTop : '-185px'
},
duration,
easing,
function()
{
animating = false;
}
);The width is animated from 300px to 400px, the height from 200px to 350px, the margin-left
from -160px to -210px, and the margin-top from -110px to -185px. All four of these properties are
animated at the same time, at the same rate determined by the duration and the easing selections.
With the exception of the specifi cation of custom CSS properties to animate, the animate() method
is otherwise similar to the methods introduced in the earlier sections of this chapter.