jQuery 1.4 Animation Techniques - Index of

Sliding Animations
2. Save the new file as slideFlicker.html. We'll also need a new stylesheet for this
example (in addition to fadeIn.css, which should already be linked to from the
original file). In a new file in your text editor, add the following code:
nav li { position:relative; }
.subnav {
display:none; width:100%; margin-left:-2px; border:2px solid
#aaa;
border-top:none; -moz-border-radius:0 0 7px 7px;
-webkit-border-bottom-left-radius:7px;
-webkit-border-bottom-right-radius:7px; border-radius:0 0 7px
7px;
position:absolute; text-align:left;
}
div.subnav { width:244%; }
.subnav ul { float:left; }
.subnav li { float:none; border-right:none; }
.subnav li a { border-bottom:none; font-size:14px; }
.subnav li a:hover { background-color:#ccc; }
.subnav li.first a {
border-top:none; -moz-border-radius:0;
-webkit-border-bottom-left-radius:0;
-webkit-border-top-left-radius:0; border-radius:0;
}
.subnav li.last a {
border-bottom:1px solid #fff; -moz-border-radius:0 0 7px 7px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-left-radius:7px;
-webkit-border-bottom-right-radius:7px; border-radius:0 0 7px
7px;
}
.subnav .left li a { border-right:none; }
.subnav .left li.last a {
-moz-border-radius:0 0 0 7px;
-webkit-border-bottom-right-radius:0; border-radius:0 0 0 7px;
}
.subnav .right li.last a {
-moz-border-radius:0 0 7px 0; -webkit-border-bottom-left-
radius:0;
border-radius:0 0 7px 0;
}
.subnav li h2 {
margin:0; padding:5px 0; font-size:12px; font-weight:normal;
text-indent:20px; background-color:#eee;
}
[ 94 ]