7
jQuery之图片关联伸缩效果
source link: https://www.zhangxinxu.com/wordpress/2009/08/jquery%e4%b9%8b%e5%9b%be%e7%89%87%e5%85%b3%e8%81%94%e4%bc%b8%e7%bc%a9%e6%95%88%e6%9e%9c/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
jQuery之图片关联伸缩效果
这篇文章发布于 2009年08月31日，星期一，16:37，归类于 jQuery相关。 阅读 44878 次, 今日 160 次 9 条评论
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()下，否则效果会有不听使唤的感觉。
是不是学到了很多？可以
有话要说？点击Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK