企业项目百叶窗的简化var $lis = $(".shutter li"); //监听是给所有的li，碰到所有li的时候都有事情发生 $lis.mouseenter(function(){ $lis.stop(true); //得到碰到的这个li的编号，$(this)表示触发事件的li标签 var index = $(this).index(); //要让每个li有不同的运动终点，所以就要有each这个东西遍历每个li //只有each能提供i变量 $lis.each(function(i){ //里面的$(this)指的是遍历到的li元素 if(i<= index){ //小于等于触碰的li序号的li，就要往左边移动 $(this).animate({"left" : 60 * i},500); }else{ //大于触碰的li序号的li，就要往右边移动 $(this).animate({"left" : 560 + 60 * (i - 1)},500); } }); //变亮业务，碰到的这个li的子.mask变亮 $(this).children(".mask").stop(true).fadeOut(); }); //离开每个li的时候 $lis.mouseleave(function(){ //离开的时候自己的子mask淡入，淡入到0.6 $(this).children(".mask").fadeIn(); $lis.each(function(i){ $(this).animate({"left" : 160 * i},500); }) })
未经允许不得转载： ICode联盟 » 插件特效 » jQuery图片百叶窗特效代码_jQuery图片手风琴效果