今天写一个简单的手风琴效果，不用插件，利用强大的jQuery，写一个手风琴效果。
页面预览，请点击这里预览：
手风琴预览
案例分析：
html结构
就是一个大盒子里面放着5个li，每个li的小小是200像素，给li浮动起来，但是这里，我用一个each循环给这5个li加的背景，这样更简洁，当然大家也可以自己给li直接指定背景。
<div class="box">
<ul>
<li>好多钱</li>
<li>好多钱</li>
<li>好多钱</li>
<li>好多钱</li>
<li>好多钱</li>
</ul>
</div>
jquery 语句
这个效果完全是对于jqueryanimate的使用，核心语句是这样的，当鼠标放到当
前li上，自己变成600宽，但是他的兄弟变成100宽，这样，5个li的宽度一加，还是没超过大盒子的宽度，这样li就不会掉下来， 当鼠标离开的时
候，所有的li再复原为原来的200宽，这样就完成这个案例了，详细语句如下：
<script type="text/javascript">
$(document).ready(function() {
$("li").each(function(index, el) {
var inde=index+1;
$(el).css({"background":"url("+inde+".jpg)"})
});
$("li").hover(function() {
$(this).stop().animate({width: "600px"}, 500).siblings().stop().animate({width:"100px"}, 500)
}, function() {
$("li").stop().animate({width:"202px"}, 500)
});
});
</script>
是不是很简单，小强零零壹 和大家一起分享。