jQuery 1.4 Animation Techniques - Index of

3. Save this as slide.html. Next create the following stylesheet:
#image { position:relative; float:left; }
#image img { margin-bottom:-5px; }
#image div {
display:none; width:100%; padding:10px 0; position:absolute;
left:0; bottom:0; top:auto !important; text-align:center;
font-style:italic; background-color:#000; color:#fff;
}
4. Save this file as slide.css.
[ 169 ]
Chapter 6
5. When we view the page we should find that the caption is displayed as soon as
we move the mouse over the image, and then removed when we move the mouse
off it:
In the previous screenshot we see the caption sliding out from the left edge of the container.
What just happened?
The image and caption are held in a container so that the caption can be positioned
accurately. We use jQuery's hover() method, which allows us to attach event handlers for
both the mouseover and mouseout events, to show the caption by sliding it in, or hide it by
sliding it out.