企业项目百叶窗的简化
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);
})
})