jQuery 1.4 Animation Techniques - Index of

[ 123 ]
Chapter 5
text-align:center; text-decoration:none;
font:90px "Palatino Linotype", "Book Antiqua", Palatino, serif;
line-height:400%;
}
#frame a:hover {
color:#fff; text-shadow:0 0 5px #000; filter:alpha(
opacity = 100);
filter: Shadow(Color=#000, Direction=0);
}
#frame a:focus { outline:none; }
#prev { left:0; }
#next { right:0; }
#overlay {
width:100%; height:100%; position:absolute; left:0; top:0;
z-index:3;
}
#overlay div { position:absolute; }
5. Save this in the css folder as advanced-transitions.css.
What just happened?
All we have on the underlying page are the images we wish to transition between within
a container. It's best to keep the markup requirements for plugins as simple as possible so
that they are easy for others to use and don't place undue restrictions on the elements or
structure they want to use.
The images are positioned absolutely within the container using CSS so that they stack up on
top of one another, and we set our visible class on the first element to ensure one image
is above the rest in the stack.
Most of the styling goes towards the previous and next anchors, which we'll create with
the plugin. These are set so that each one will take up exactly half of the container and are
positioned to appear side-by-side. We set the z-index of these links so that they appear
above all of the images. The font-size is ramped up considerably, and an excessive
line-height means we don't need to middle-align the text with padding.
In most browsers, we simply set the color of the anchors to transparent, which hides
them. Then we set the color to white in the hover state. This won't work too well in IE
however, so instead we set the link initially to transparent with the Microsoft opacity
filter and then set it to fully opaque in the hover, which serves the same purpose.