by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=106

这里要介绍的这个效果又称为手风琴效果。用css就可以实现类似的效果，但是使用css只是单纯地将宽度变大和缩小，而使用jQuery可以实现流畅的动画效果，体验会更加不错的！

效果截图示意：

您可以狠狠地点击这里：图片关联展开收缩demo实例页面

使用的源代码如下：

var elLists = $(".zxx_img_list");
elLists.mouseover(function(){
    elLists.not($(this)).stop().animate({
        width:"20%" 
    },500); 
    $(this).stop().animate({
        width:"38%" 
    },500);                               
}).mouseout(function(){
    elLists.stop().animate({
        width:"24.5%"   
    },500); 
});

这里的效果应用了animate()这个很神奇很伟大很实用的函数，我感觉就是个动画函数，实现滑动效果，包括位置的移动，透明度改变，padding，margin间距值改变等，有兴趣可以去研究一下。

然后，animate()执行前别忘记了先stop()下，否则效果会有不听使唤的感觉。

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=106

（本篇完）