jQuery UI实现动画效果代码分享

页面文档载入后，为第一张图片添加班级属性值为img1，为第二张图片添加班级属性值img2，为第三张图片添加班级属性img3，为第四张图片添加班级属性值img4，这会使得每张图片的下半部分被上一张更大的图片给覆盖住。

当鼠标单击暴露在最上面的图片时，该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失，与此同时，其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置。全部动态效果结束后，消失不见的那张图片重新显示在最下面。

！DOCTYPE html html hearteta charset=' utf-8 ' title jquery UI/title style type=' text/CSS ' div { position : relative；} img { position : absoluteborder : solid 3px黑色；} .img 1 {宽度： 300 px高度： 220 pxtop :120 pxleft : 200 pxz-index : 4；opa city 33601 cursor :指针指针；} .img 2 {宽度： 200 px高度： 145像素；top :85 pxleft : 250 pxz-index : 3；opacity: 0.7 }。img 3 {宽度： 120 px高度： 90pxtop :60 pxleft : 290 pxz-index : 2；opa city 3360 0.5 } . img 4 { width : 60px高度： 55pxtop :45 pxleft : 320 pxz-index : 1；opa city 3360 0.4 }/style脚本类型=' text/JavaScript ' src=' http : jquery-1。5 .2 .量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。效果。核心。量滴js '/script脚本类型=' text/JavaScript ' src=' http : jquery。效果。规模。量滴js '/script脚本类型=' text/JavaScript ' $(function(){)每个（函数（索引){$(这个)).addClass('img '(索引1));});$('img.img1 ').live('click '，function(){$(this).hide('puff '，{percent:150}，600，function(){$(this).attr('class '，' img4 ').show()；});$('img.img2 ').switchClass('img2 '，' img1 '，600)；$('img.img3 ').switchClass('img3 '，' img2 '，600)；$('img.img4 ').switchClass('img4 '，' img3 '，600)；});});/script/headdydivimg src=' http :1。jpg ' img src=' http :2。jpg ' img src=' http :3。jpg ' img src=' http :4。jpg '/div/body/html初始效果：

点击后效果：