jQuery 1.4 Animation Techniques - Index of

Custom Animations
color:#444;
}
#viewer { border:1px solid #999; background-color:#fff; }
#slider ul { width:120px; }
#slider ul li a {
display:block; width:10px; height:10px; text-indent:-5000px;
text-decoration:none; border:2px solid #666;
-moz-border-radius:17px; -webkit-border-radius:17px;
border-radius:17px; background-color:#fff; text-align:center;
}
#slider #prev, #slider #next { margin:0; text-align:center; }
#slider #prev { left:10px; }
#slider #prev a, #slider #next a {
display:block; height:28px; width:28px; line-height:22px;
text-indent:0; border:1px solid #666; -moz-border-radius:17px;
-webkit-border-radius:17px; border-radius:17px;
background-color:#fff;
}
#prev a, #next a { font:bold 40px "Trebuchet MS"; color:#666; }
#slider ul li a.active { background-color:#F93; }
What just happened?
With this code we style all of the visual aspects of the widget without interfering with
anything that controls how it works. We give it some nice rounded corners and add a
drop-shadow to the widget, turn the numeric links into little clickable icons, and style
the previous and next links. Colors and fonts are also set in this section as they too are
obviously highly dependent on the theme.
These styles add a basic, neutral theme to the widget, as shown in the following screenshot:
[ 112 ]