jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
[ 167 ]
Chapter 6
3. Save this page as puff.html. Add the following styles for the dialog box to a new
file in your text editor:
#confirm {
display:block; width:400px; height:120px; position:absolute;
border:1px solid #ccc;
background-image:-moz-linear-gradient(0% 5px 90deg, #eee, #666);
background-image:-webkit-gradient(linear, 0% 0%, 0% 5%,
from(#333), to(#eee));
font:normal 13px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
}
#confirm img { margin:20px 20px 0 20px; float:left; }
#confirm p { margin:40px 0 0 0; }
#confirm button { width:68px; margin:20px 10px 0 0; float:right; }
4. Save this new file as puff.css in the css directory.
5. When we run the page in a browser, we should find that the dialog is initially
centered in the window, and that clicking either of the elements closes it
using the puff effect:
The previous screenshot shows the dialog expanding while it is faded away.
What just happened?
The first part of our script centers the dialog in the window both vertically and horizontally.
One point to note is that we cannot use margin:auto to center the dialog because it will
lose these margins when the effect is applied.
The second part of the script simply adds click handlers to each of the elements
which apply the puff effect when they are clicked.