Velocity.js Application Foundation (i)

Velocity.js is an excellent JS animation plugin that simulates the queue queues of jquery internally to achieve the animate effect. Feature effects such as morph scaling in CSS3 can be achieved, with speed and performance better than jquery and CSS3 custom animations. Compatible with the popular JS frame, small size, only 7 K after compression.
Internal implementations can refer to the official API documentation, or read the program source code. The official website address will be given at this weekend.

Velocity.js provides basic animation capabilities and, if needed, can introduce extension--velocity.ui.js.

If the HTML document introduces jquery, the JS file should be introduced in the following order:

1 <Scriptsrc= "Jquery.js"></Script>2 <Scriptsrc= "Velocity.js"></Script>3 <Scriptsrc= "Velocity.ui.js"></Script>

The basic parameters and usage of the method are described below (basics:arguments):
One, the basic method invocation form:

1 $element. Velocity ({2Width: "500px",3 property2:value24 }, {5 /*Velocity ' s default options*/6duration:400,//Duration (available slow,fast,normal)7Easing: "Swing",//transition Mode8Queue: "",//Queue9Begin:undefined,//Execute function before animation startsTenProgress:undefined,//Execute function When animation is in progress OneComplete:undefined,//animation complete Execution function ADisplay:undefined,//Show Hidden -Visibility:undefined,//Show Hidden -Loopfalse,//back to previous animation initial position theDelayfalse,//Delay -Mobileha:true //whether to turn on hardware acceleration -});

Note: Receive two parameters
The first parameter is a CSS property and a value, which can be a name-value pair in JSON form.
The second parameter is the other alternative parameter.
Comma-separated name-value pairs.

A single object can also be used in the following ways.

1 }});

Or:

1 }});

Velocity can also receive parameters like jquery's Comma method. But limited to: duration, easing, complete three properties.
For example:

$element.velocity ({top:50}, +, +, "Swing", "Swing"function() {alert ("Hi"); });

Two, the Parameter form:
Properties Map (which is the first parameter).
The name-value pairs of CSS properties and values.
Do not use padding:1 1 1 1 in this form, because you pass in multiple values (in the case of multiple values, take only the first value).
Change to Padding:1, or paddingleft:1 form.

The following CSS properties are available with Feature:hook (detailed later)
Textshadow, Boxshadow,clip,backgroundposition, Transformorigin.
Or a separate form of writing, for example: $element. Velocity ({textshadowblur: "10px"});

The following is the original English:
However, Velocity includes hooks to break off the following properties that require multiple Values:textshadow, Boxshado W, Clip,backgroundposition, and Transformorigin. Refer to the CSS support dropdown for a full listing of hooks.

Incoming attribute value units can support PX, EM, REM,%, deg, VW/VH. Do not write units by default to PX.
Incoming values can be used with the symbol +,-, *,/.
For example:

1 $element. Velocity ({2//  Defaults to the PX unit type3 Left: "50%",  4//  Add 5rem to the current REM value5//  double the current he ight6 });

Note:
Browser support: REM units no less than IE 9 support. VH/VW units not less than IE 9 or below Android 4.4 support.
Velocity supports classic jquery chained notation.

Velocity.js Official website: http://www.julian.com/research/velocity/

This article from the Front 365 blog (http://qianduan365.com/), the article content are Peaches original, reproduced please leave a message under the blog, and retain the source, thank you for your cooperation.

Velocity.js Application Foundation (i)