分享JQuery动画插件Velocity.js的六种列表加载特效

 <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 &ndash; 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 id="load">Loading data...</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>