分享JQuery动画插件Velocity.js的六种列表加载特效。在这款实例中给中六种不同的列表加载效果。分别为从上飞入、从右侧飞入、从左侧飞入、和渐显。一起看下效果图：
实现的代码。
html代码：
<h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc / Read JS source for more <span>v1.0 – Added code</span> </pre> <div id="btn"> <i class="type1">Run type 1</i> <i class="type2">Type 2</i> <i class="type3">Type 3</i> <i class="type4">Type 4</i> <i class="type5">Type 5</i> <i class="type6">Type 6</i></div> <div id="boxes"> <!-- load via JSONP --> </div> <!-- /#boxes --> <script src='jquery.js'></script> <script src='velocity.min.js'></script> <script src='velocity.ui.min.js'></script> <script>/* + jquery.js + velocity.js + velocity.ui.js */ /* ----------------------------------------------------- VELOCITY.JS SLUCE + SEQUENCE Animate different boxes with different animations and sequence it. This demo has a bounch of stuff not needed for a basic slice + sequence since everything is wrapped up in a function and lots of if/else statements. For basic usage of using Velocity sequence go to: http://julian.com/research/velocity/#uiPack ----------------------------------------------------- */ // Define base div var boxes = $('#boxes'); /* ----------------------------------------------------- REGISTER CLICK EVENTS FOR BUTTONS ----------------------------------------------------- */ $('.type1').click(function(){ goVelocity(true); }) $('.type2').click(function(){ goVelocity(true, 'custom.flickDownIn', 'custom.flickUpIn', vOption2); }) $('.type3').click(function(){ goVelocity(true, 'custom.zoomOutIn', 'custom.zoomInIn', vOption3); }) $('.type4').click(function(){ goVelocity(true, 'custom.superZoomOutIn', 'custom.superZoomOutIn', vOption4); }) $('.type5').click(function(){ goVelocity('type5', '', '', vOption5); }) $('.type6').click(function(){ goVelocity('type7', '', '', vOption5); }) /* ----------------------------------------------------- GET SOME CONTENTS 100% UNRELATED to animation, scroll down the 'real' stuff ----------------------------------------------------- */ boxes.append('<div >) var getMax = 12; var str = ''; //var tags = 'tommiehansen+sunset'; var tags = 'tommiehansen', sort = 'interestingness-desc'; uri = "http://pipes.yahoo.com/pipes/pipe.run?_id=6b12dfa3cc61dcafcdcb116bc8114e0b&_render=json&search="+tags+"&sort="+sort+"&num="+getMax; $.getJSON(uri, function(data) { $.each(data.value.items, function(i,item){ //var img = item.media.m; var img = item.guid; img = img.replace('.jpg','_m.jpg'); str += '<div class="box">'; str += '<a href="' + "http://www.w2bc.com" + '" target="_blank">'; str += '<img src="' + img + '" width="240" height="159" /></a>'; str += '<div class="boxRight"><h3>' + item.title + '</h3><i>Photo <span>by</span> '; str += '<a href="' + "http://www.w2bc.com" + '" target="_blank">Tommie Hansen</a> / flickr</i>'; str += '</div></div>'; if (i == getMax-1) { return false; } }); boxes.empty().append(str); goVelocity(); // run initial }); /* ----------------------------------------------------- BEGIN VELOCITY ANIMATIONS ----------------------------------------------------- */ // Register new animations $.Velocity.RegisterUI("custom.slideUpIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,90], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.slideDownIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,-90], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.slideLeftIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateX: [0,-90], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.slideRightIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateX: [0,90], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.zoomOutIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,1.5], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.zoomInIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,0.5], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.superZoomOutIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,5], translateZ: 0, translateY: [0,500] } ]], }); $.Velocity.RegisterUI("custom.flickUpIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,90], rotateZ: [0,10], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.flickDownIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,-90], rotateZ: [0,-10], translateZ: 0 } ]] }); $.Velocity.RegisterUI("custom.fadeOut", { defaultDuration: 300, calls: [[ { opacity: 0, translateZ: 0 } ]], reset: { translateY:0, opacity:0, rotateZ:0, scale:1, translateX:0 } }); // Define some Velocity option VARs for re-use etc var vOption = { duration: 400, stagger: 60, easing: 'easeOutQuad', display: false }; var vOption2 = { duration: 300, stagger: 90, easing: 'easeOutExpo', display: false }; var vOption3 = { duration: 300, stagger: 60, easing: 'easeOutQuad', display: false }; var vOption4 = { duration: 700, stagger: 60, easing:'easeOutQuad', display: false }; var vOption5 = { duration: 500, easing:'easeOutQuad', display: false }; var vOption6 = { duration: 500, easing:'easeOutQuad', display: false, sequenceQueue: false }; // Default transitions var anim1 = 'custom.slideLeftIn', anim2 = 'custom.slideRightIn'; function goVelocity(isOut, ani1, ani2, vOpt) { if(!ani1) { ani1 = anim1, ani2 = anim2 }; if(!vOpt) { vOpt = vOption; }; // base VARs var box = boxes.find('.box'); // Slice boxes to different groups (for IN-transitions) var slice1 = 3, // 1-3 slice2 = 6, // 4-6 slice3 = 9; // 7-9 // setup Velocity sequence var seq1 = box.slice(0, slice1).get(), // .get() = transform jquery object to raw DOM nodes seq2 = box.slice(slice1, slice2).get(), seq3 = box.slice(slice2, slice3).get(), seq4 = box.slice(slice3).get(); // rest of elements after slice3 var velocitySequence; $.Velocity(box.get(), "stop"); // stop all animation if one is already running // Begin a lot of if() if(isOut==true){ velocitySequence = [ { elements: box.get(), properties: 'custom.fadeOut', options: vOption }, { elements: seq1, properties: ani1, options: vOpt }, { elements: seq2, properties: ani2, options: vOpt }, { elements: seq3, properties: ani1, options: vOpt }, { elements: seq4, properties: ani2, options: vOpt } ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut=='type5'){ var b = box.get(); // convert to raw dom nodes var nth1 = box.filter(':nth-child(3n+1)').get(); var nth2 = box.filter(':nth-child(3n)').get(); var nth3 = box.filter(':nth-child(3n-1)').get(); velocitySequence = [ { elements: b, properties: 'custom.fadeOut', options: vOption }, { elements: nth1, properties: 'custom.slideDownIn', options: vOpt }, { elements: nth2, properties: 'custom.slideUpIn', options: vOption6 }, { elements: nth3, properties: 'custom.zoomOutIn', options: vOption3 }, ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut=='type6'){ var b = box.get(); // convert to raw dom nodes var one = box.slice(0,1) var two = box.slice(1,3); var three = box.slice(3); velocitySequence = [ { elements: b, properties: 'custom.fadeOut', options: vOption }, { elements: one, properties: 'custom.slideDownIn', options: vOpt }, { elements: two, properties: 'transition.slideUpIn', options: vOption6 }, { elements: three, properties: 'transition.slideDownIn', options: vOption5 }, ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut=='type7'){ var b = box.get(); // convert to raw dom nodes //var s1 = box.eq(0); //var s2 = box.eq(4) var s0 = box.slice(0,1); var s1 = box.slice(1,2); var s2 = box.slice(2,3); var s3 = box.filter(':nth-child(3n-1)'); s3 = s3.slice(1); // skip first var s4 = box.filter(':nth-child(3n+1)'); s4 = s4.slice(1); // skip first var s5 = box.filter(':nth-child(3n)'); s5 = s5.slice(1); // skip first velocitySequence = [ { elements: b, properties: 'custom.fadeOut', options: vOption }, { elements: s0, properties: 'custom.slideLeftIn', options: vOpt }, { elements: s1, properties: 'custom.slideDownIn', options: vOption6 }, { elements: s2, properties: 'custom.slideRightIn', options: vOption6 }, { elements: s3, properties: 'custom.slideUpIn', options: vOpt }, { elements: s4, properties: 'custom.slideLeftIn', options: vOpt }, { elements: s5, properties: 'custom.slideRightIn', options: vOption6 }, ]; $.Velocity.RunSequence(velocitySequence); } else { // Page load animation box.css('opacity', 0); velocitySequence = [ { elements: seq1, properties: ani1, options: vOpt }, { elements: seq2, properties: ani2, options: vOpt }, { elements: seq3, properties: ani1, options: vOpt }, { elements: seq4, properties: ani2, options: vOpt } ]; $.Velocity.RunSequence(velocitySequence); } } // end goVelocity()//@ sourceURL=pen.js </script>