手风琴切换效果

手风琴图片切换效果，一个很简单的效果，本来没什么思路，不过还是通过自己的思考和尝试，完全实现出来了。看来要经常写写这种小效果增加一点自信。

样式：

样式上没难度，主要是用绝对定位+nth-child。两个注意点：

1. .wrap用了overflow:hidden，图片滑动时还是会超出并出现滚动条。因为我没有设置父元素relative
2. 用jQuery使IE8及以下兼容nth-child
3. 用PIE.htc使IE6-8兼容border-radius，只要在设置了border-radius的元素css中增加这一句behavior:url(PIE.htc);
4. 使IE6-8兼容rgba，主要是加上以下这句：
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
   其中的7F是alpha255换成16进制*，常用的rgba和IE下filter数值的转换：
   rgba透明值：0.1　　0.2　　0.3　　0.4　　0.5　　0.6　　0.7　　0.8　　0.9
   IE下filter值：19　　 33　　 4c　　 66　　 7f　　 99　　 b2　　 c8　　 e5
   参考博文

实现思路：

• 思路1：移入的时候，有可能是移动下一张打开，或移动下几张打开；也有可能是移动本张打开。错误：前面几张也可能需要动。
• 思路2：移入的时候，通过判断left值，来判断是往前移，还是往后移，即需要动前面图片还是动后面的图片。正确

实现重点：

1. 用position().left取得当前的left，用index()取得当前的索引值
2. 用nextAll()取得所有后面的元素，用slice(1,$(this).index()+1)取得从第2张到当前张的所有元素
3. 用each()来遍历
4. 用animate实现动画
5. 关键代码如下：

兼容性：

兼容Chrome, Firefox, IE6及以上