What I learned about velocity.js

I haven't know much about javascript,especially the plugins such things.Today I learn it according to a simple project.

When to use it? Velocity's built-in solutions instead of rolling your own (or relying on jQuery): looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration can all be done within Velocity. 

It seems like universal functions with animations, which is efficient when coding dynamic website and app on phones. Also , I heard the other javascript called move.js ,which is the same ,but not that wide ranges attractions. Here I focus on velocity.js .More information http://julian.com/research/velocity/

Velocity.js also works when jQuery is not loaded on your page. Using Velocity without jQuery removes support for IE8, making IE9 the new minimum supported version of IE.

$element.velocity({
    width: "500px",
    property: value
}, {
    /* Velocity's default options */
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});

Inside the first{} contains the Properties and Value ,which seems like 
CSS to me.And the second {}is the options part,the most frequent use is 
"duration",which supports durations specified in milliseconds as well as jQuery's named durations: "slow", "normal", and "fast".
"easing":
/* Use one of the jQuery UI easings. */

$element.velocity({ width: 50 }, "easeInSine");

/* Use a custom bezier curve. */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* Use spring physics. */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* Use step easing. */
$element.velocity({ width: 50 }, [ 8 ]);

"queue":You can set queue to false to force a new animation call to immediately run in parallel with any current-active animations. I code ' sequenceQueue :false ' to make the two animations processing at the same time."begin":Pass begin a function to be triggered prior to the start of the animation.$element.velocity({
    opacity: 0
}, {
    /* Log all the animated divs. */
    begin: function(elements) { console.log(elements); }
});"complete": Pass the complete option a function to be triggered once the animation has finished.$element.velocity({
    opacity: 0
}, {
    /* Log all the animated divs. */
    complete: function(elements) { console.log(elements); }
});"progress":Pass the progress option a callback function to be repeatedlytriggered throughout the duration of an animation. // Use the progress callback.$("div").velocity({scale: 1.5}, { duration: 5000,     progress: function(elements, percentComplete, timeRemaining,    timeStart) {$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");    $timeRemaining.html(timeRemaining + "ms remaining.")}});The animation is amazing from http://codepen.io/julianshapiro/pen/Jktjq"loop":Set the loop option to an integer to specify the number of times an animation should alternate between the values in the call's property map and the element's values prior to the call:

$element.velocity({ height: "10em" }, { loop: 2 });

"delay":Specify the delay option in milliseconds to insert a pause before an animation begins. "display"&"visibility":Velocity's display and visibility options correspond directly to their CSS counterparts, and therefore accept the same values: display accepts "inline", "inline-block", "block", "flex", "" (empty quotes to remove the property altogether), and whatever else the browser natively supports. visibility accepts "hidden", "visible", "collapse", and "" (empty quotes to remove the property altogether).

Command: Fade & SlidefadeIn and fadeOut   slideUp and slideDown

  Command: Scroll

   Command: Stop  

   Command: Finish 

   Command: Reverse

The UI pack includes a couple dozen pre-registered effects for you to use out of the box. 

nice link to see the performances!

http://julian.com/research/velocity/#uiPack

Queue animation:(依次入场动画)

var seqInit=[

     {elements:container,

      properties:'slideDown'

     },

     {elements:box,

      properties:'slideUp',

      options:{sequenceQueue:false}}

];

$.Velocity.Runsequence(seqInit);

animation built yourself:(自定义动画)

$.Velocity.RegisterUI('yifang.slideUpIn',{

     defaultDuration:500,

     calls:[

       {opacity:[1,0],translateX:[0,100]}

     ]

});

event(点击事件)

open.on('click',function(){

    $.Velocity.Runsequence(event);

});