var images = "", count = 50; for(var i = 1; i <= count; i++) images += ''; //图片添加到网格中 $(".grid").append(images); var d = 0; //延迟 var ry, tz, s; //转换参数 //animation time $(".animate").on("click", function(){ //fading out the thumbnails with style $("img.grid-image").each(function(){ d = Math.random()*1000; //1ms to 1000ms delay $(this).delay(d).animate({opacity: 0}, { step: function(n){ s = 1-n; //scale - will animate from 0 to 1 $(this).css("transform", "scale("+s+")"); }, duration: 1000, }) }).promise().done(function(){ //after *promising* and *doing* the fadeout animation we will bring the images back storm(); }) }) //bringing back the images with style function storm() { $("img.grid-image").each(function(){ d = Math.random()*1000; $(this).delay(d).animate({opacity: 1}, { step: function(n){ //rotating the images on the Y axis from 360deg to 0deg ry = (1-n)*360; //translating the images from 1000px to 0px tz = (1-n)*1000; //applying the transformation $(this).css("transform", "rotateY("+ry+"deg) translateZ("+tz+"px)"); }, duration: 3000, easing: 'easeOutQuint', }) }) }