相册列表展示动画解析

var isFold=false;
var rows=5;
var collums=5;
//减少dom的查询次数
var gallery=$(".gallery");
//重复操作放在变量中
var w=gallery.width()/collums;
var h=gallery.height()/rows;
//初始化
innit();

//初始化
    function innit() {
 for(var r=0;r")
  .css({
      "width":w,
      "height":h,
      "left":c*w,
      "top":r*h
  })
  .find(".item")
  .css({
      "background-image":"url(img/"+(r*collums+c)+".jpg)",
      "background-size":"cover"
  })
  .end()
  .appendTo(gallery);
     };
 };
    };

//合拢
function fold (index) {
    //让li还原
    var aLi=gallery.find("li");
//    var index=$(this).index();
    //所有的li translate rotate 还原
    aLi
    .css({"transform":"translate(0px,0px) rotate(0deg)"})
    .find(".item")
    .css({
 "transform":"scale(1)",
 "background-image":"url(img/"+index+".jpg)",
 "background-size":"auto"
    })
    .each(function (i) {
 var c=i%collums*100/(collums-1);
 var r=parseInt(i/rows)*100/(rows-1);
 $(this).css({"background-position":c+"%" +r+"%"})
    })
    isFold=true;
};

function unfold () {
    $(".gallery").find("li").each(function (i) {
 //x轴移动的距离 列数乘上30再减去起始值
 var dx=i%collums*30-60;
 //Y轴移动的距离 列数乘上30再减去起始值
 var dy=parseInt(i/collums)*30-60;
 //随机旋转的角度 -30deg到30deg
 var deg=(Math.random()*60-30);
 //li移动距离 同时旋转  item进行缩放
 $(this)
 .css("transform","translate("+dx+"px,"+dy+"px) rotate("+deg+"deg)")
 .find(".item")
 .css({"background-image":"url(img/"+i+".jpg)","background-size":"cover"})

    }).find(".item").css("transform","scale(0.97)");
    isFold=false;
};

//初始化
innit();
//初始状态为展开
unfold();
//点击事件
gallery.find("li").click(function () {
    if (isFold) {
 unfold();
    } else{
 //传递当前图片
 var index=$(this).index();
 fold(index);
    };
});

第一个值 all或者需要改变的样式
第二个值过度时间
第三个值 动画类型
最后一个 延迟事件
left 2s ease-in 2s，top 2s ease-in 2s