jquery动画2.元素坐标动画效果（创建一个图片走廊）

效果预览图片：

大家可以下载demo看完整效果，下面介绍制作过程。
　　1.首先创建一个html页面，html结构如下：

<div id=”slider”>
<div id=”viewer”>
<img id=”image1″ src=”img/amstrad.jpg” alt=”Amstrad CPC 472″ />
<img id=”image2″ src=”img/atari.jpg” alt=”Atari TT030″ />
<img id=”image3″ src=”img/commodore16.jpg” alt=”Commodore 64″ />
<img id=”image4″ src=”img/commodore128.jpg” alt=”Commodore 128″ />
<img id=”image5″ src=”img/spectrum.jpg” alt=”Sinclair ZX Spectrum +2″ />
</div>
<ul id=”ui”>
<li class=”hidden” id=”prev”><a href=”” title=”Previous”>«</a></li>
<li><a href=”#image1″ title=”Image 1″ class=”active”>Image 1</a></li>
<li><a href=”#image2″ title=”Image 2″>Image 2</a></li>
<li><a href=”#image3″ title=”Image 3″>Image 3</a></li>
<li><a href=”#image4″ title=”Image 4″>Image 4</a></li>
<li><a href=”#image5″ title=”Image 5″>Image 5</a></li>
<li class=”hidden” id=”next”><a href=”” title=”Next”>»</a></li>
</ul>
</div>

大家一看就明白，viewer包含了几张图片，ul对象里面包含了‘上一条’、‘下一条’和各个图片对应的导航。
2.接下来需要为这些html元素设置css样式，css我就不多说了，就是给viewer、图片等元素加样式，viewer同时只能显示一张图片：

#slider
{
width: 500px;
position: relative;
}
#viewer
{
width: 400px;
height: 300px;
margin: auto;
position: relative;
overflow: hidden;
}
#slider ul
{
width: 350px;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#slider ul:after
{
content: “.”;
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#slider li
{
margin-right: 10px;
float: left;
}
#prev, #next
{
position: absolute;
top: 175px;
}
#prev
{
left: 20px;
}
#next
{
position: absolute;
right: 10px;
}
.hidden
{
display: none;
}
#slide
{
width: 2000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
#slide img