{"id":3453,"date":"2015-01-31T00:47:23","date_gmt":"2015-01-30T16:47:23","guid":{"rendered":"https:\/\/sdeno.com\/?p=3453"},"modified":"2017-08-01T14:02:59","modified_gmt":"2017-08-01T06:02:59","slug":"velocity%e5%8f%96%e4%bb%a3jquery-animate%e7%9a%84%e6%8f%92%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=3453","title":{"rendered":"velocity.js\u4e2d\u6587\u624b\u518c velocity\u53d6\u4ee3jQuery animate()\u7684\u63d2\u4ef6"},"content":{"rendered":"

Velocity.js\u7b14\u8bb0<\/a><\/p>\n

velocity.min<\/a>\u00a01.2.1<\/p>\n

velocity.min<\/a>\u00a01.2.3<\/p>\n

\u76ee\u524d\u6700\u65b0\u5df2\u7ecf\u51fa\u5230\u4e861.5.0\u3002\u81f3\u4e8e\u4fee\u590d\u6216\u6dfb\u52a0\u4e86\u4ec0\u4e48\u53ef\u4ee5\u5230github\u770b\u770b<\/p>\n

https:\/\/github.com\/julianshapiro\/velocity<\/a><\/p>\n

\u672c\u5730\u4e0b\u8f7d\uff1avelocity_1.5.0.zip<\/a><\/p>\n

 <\/p>\n

Velocity.js\u8bed\u6cd5\u8ddfjquery\u4e2d\u4f7f\u7528animate()\u7684\u8bed\u6cd5\u4e00\u6837\uff0c\u4f46\u4ec5\u517c\u5bb9IE8\u4ee5\u4e0a\u6d4f\u89c8\u5668\u5305\u62ecIE8\u79fb\u52a8\u8bbe\u5907\u4e0a\u652f\u6301Android 2.3\uff0c
\n\u7279\u70b9\u662f\u53ef\u4ee5\u5b9e\u73b0\u989c\u8272\u6e10\u53d8\u3001transform\u3001\u5faa\u73af\uff08loops\uff09\u3001\u63a7\u5236\u52a0\u901f\u5ea6\uff08easings\uff09\u3001\u652f\u6301SVG\u548c\u6eda\u52a8\uff08scrolling\uff09\u3002
\n\u751a\u81f3\u6bd4jquery\u81ea\u5e26\u7684animate\u548cCSS\u5c5e\u6027transitions\u597d\u3002<\/p>\n

\u8fd8\u6709\u53e6\u4e00\u6b3e\u52a8\u753b\u5e93GSAP\uff1aTweenMax.js<\/a>
\nvelocity\u603b\u4f53\u4ee3\u7801\uff1a<\/p>\n

$element.velocity({ \r\n   width: \"500px\",\r\n   property2: value2\r\n}, {\r\n \/* \u4ee5\u4e0b\u5982\u679c\u6ca1\u6709\u505a\u7279\u522b\u8bbe\u7f6e\u7684\u8bdd\u90fd\u662f\u9ed8\u8ba4\u5c5e\u6027 *\/\r\n duration: 400, \/\/ \u4e00\u7cfb\u5217\u52a8\u4f5c\u5728\u591a\u5c11\u65f6\u95f4\u5185\u5b8c\u6210\r\n easing: \"swing\", \/\/\u52a8\u753b\u52a0\u901f\u5ea6\r\n queue: \"\", \/\/\u52a8\u753b\u961f\u5217\uff0c\u8981\u5fc5\u987b\u7b49\u67d0\u4e2a\u52a8\u4f5c\u6267\u884c\u5b8c\u540e\u624d\u80fd\u6267\u884c\u67d0\u4e2a\u52a8\u4f5c\u3002\r\n begin: undefined, \/\/\u52a8\u753b\u6267\u884c\u524d\uff0c\u6267\u884c\u6b64\u51fd\u6570\r\n progress: undefined,\/\/\u52a8\u753b\u6267\u884c\u8fdb\u5ea6\r\n complete: undefined,\/\/\u52a8\u753b\u6267\u884c\u540e\uff0c\u6267\u884c\u6b64\u51fd\u6570\r\n display: none, \/\/\u52a8\u753b\u6267\u884c\u5b8c\u540e\uff0c\u9690\u85cf\u3002\u914d\u5408opacity: 0\u4f7f\u7528\u5c31\u662f\u6de1\u5165\u6de1\u51fa\u6548\u679c\r\n visibility: hidden,\/\/\u52a8\u753b\u6267\u884c\u5b8c\u540e\uff0c\u9690\u85cf\u3002\u914d\u5408opacity: 0\u4f7f\u7528\u5c31\u662f\u6de1\u5165\u6de1\u51fa\u6548\u679c\r\n loop: true \/ 2, \/\/\u5faa\u73af\u6b21\u6570\uff0c\u5b8c\u6210\u52a8\u4f5c\u4e4b\u540e\u5728\u6309\u539f\u6765\u52a8\u4f5c\u540e\u9000\uff0c\u7b97\u4e00\u6b21\u3002\r\n delay: 2000,\/\/\u52a8\u4f5c\u591a\u5c11\u79d2\u540e\u5f00\u59cb\u6267\u884c\r\n mobileHA: true\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
velocity\u8bed\u6cd5\u4e5f\u53ef\u4ee5\u50cfjquery\u8bed\u6cd5\u4e00\u6837<\/p>\n
$element.velocity({'width':'500'},5000, \"swing\",function() { alert(\"Hi\")});<\/pre>\n
 <\/p>\n
\u652f\u6301\u7684\u5355\u4f4d\u6709px, em, rem, %, deg\uff0cvw\/vh \u5982\u679c\u4e0d\u5199\u5355\u4f4d\u9ed8\u8ba4\u662fpx,
\n\u4e5f\u652f\u6301\u8fd0\u7b97\u7d2f\u52a0\u4f8b\u5982\uff1a<\/p>\n
$element.velocity({ \r\n top: 50, \/\/ \u9ed8\u8ba4\u52a0px\u5355\u4f4d\r\n left: \"50%\",\r\n width: \"+=5px\", \/\/\u539f\u6765\u5bbd\u5ea6\u52a0\u4e0a5 \r\n height: \"*=2\" \/\/ \u539f\u6765\u9ad8\u5ea6\u4e58\u4ee52\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
\u52a8\u753b\u961f\u5217<\/span>\u5199\u6cd5\u4f8b\u5982\uff1a<\/p>\n
$(\"div\")\r\n .velocity({ width: 75 }, 1500) \/\/\u5148\u6267\u884c\r\n .velocity({ height: 0 }, 1250); \/\/\u4e4b\u540e\u6267\u884c<\/pre>\n
 <\/p>\n
 <\/p>\n
queue\u52a8\u753b\u961f\u5217<\/span>\u5199\u6cd5\uff0c\u4f8b\u5982\uff1a<\/p>\n
\u5982\u679c\u52a8\u753b\u4e2d\u7684queue\u5c5e\u6027\u4e00\u65e6\u8bbe\u7f6e\u4e86\u503c\uff0c\u52a8\u753b\u5c31\u4e0d\u4f1a\u6267\u884c\u3002<\/p>\n
$(\"div\")\r\n .velocity({ translateX: 75 }, { queue: \"a\" }) \/\/\u7ed9\u52a8\u753bqueue\u547d\u540d 'a'\r\n .velocity({ translateY: 75 }, { queue: \"a\" })\r\n .velocity({ width: 50 }, { queue: \"b\" })\r\n .velocity({ height: 0 }, { queue: \"b\" })<\/pre>\n
$(\"div\").dequeue(\"a\"); \/\/\u9700\u8981dequeue\u8c03\u7528\u624d\u80fd\u6267\u884ca\u7684\u52a8\u753b\uff0c\u800c\u4e14\u662f\u6309\u5148\u540e\u987a\u5e8f\u6267\u884c\u7684<\/pre>\n
\u52a0\u901f\u5ea6\u8bbe\u7f6e<\/span><\/p>\n
$element.velocity({ width: 50 }, \"easeInSine\");<\/pre>\n
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);<\/pre>\n
$element.velocity({ width: 50 }, [ 250, 15 ]);<\/pre>\n
$element.velocity({ width: 50 }, [ 8 ]);<\/pre>\n
\u901f\u5ea6\u6548\u679c\u5177\u4f53\u67e5\u770bhttp:\/\/easings.net\/zh-cn<\/a><\/p>\n
 <\/p>\n
\u4e5f\u53ef\u4ee5\u5355\u72ec\u7684\u4e3a\u67d0\u4e00\u4e2a\u5c5e\u6027\u8bbe\u7f6e\u53d8\u5316\u52a0\u901f\u7684\u6548\u679c\u3002\r\n\/\/\u66f4\u5f3a\u7684\u4e00\u4e2a\u529f\u80fd\u5c31\u662f\u5728\u505a\u5f02\u6b65\u52a8\u753b\u7684\u65f6\u5019\uff0c\u80fd\u4e3a\u6307\u5b9a\u4e00\u4e2a\u5c5e\u6027\u8bbe\u7f6e\u52a0\u901f\u6548\u679c\uff0c\u5982\r\n$element.velocity({\r\n borderBottomWidth: [ \"2px\", \"spring\" ], \/\/ Uses \"spring\"\r\n width: [ \"100px\", [ 250, 15 ] ], \/\/ Uses custom spring physics\r\n height: \"100px\" \/\/ Defaults to easeInSine, the call's default easing\r\n}, { \r\n easing: \"easeInSine\" \/\/ Default easing\r\n});<\/pre>\n
\u4e5f\u53ef\u4ee5\u81ea\u5df1\u81ea\u5b9a\u4e49\u52a0\u901f\u6548\u679c
\np:\u767e\u5206\u6bd4\uff08\u5341\u8fdb\u5236\u503c\uff09
\nopts\uff1aThe options object passed into the triggering Velocity call\uff08\u53ef\u9009\uff09
\ntweenDelta\uff1a\u52a8\u753b\u5f00\u59cb\u5230\u7ed3\u675f\u7684\u5dee\u503c\uff08\u53ef\u9009\uff09<\/p>\n
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {\r\n return 0.5 - Math.cos( p * Math.PI ) \/ 2;\r\n};<\/pre>\n
 <\/p>\n
velocity\u5185\u7f6e\u901f\u5ea6\u6548\u679c\uff1a<\/p>\n
ease            [.25,.1,.25,1]\r\nease-in         [.42,0,1,1]\r\nease-out        [0,0,.58,1]\r\nease-in-out     [.42,0,.58,1]\r\neaseInSine      [.47,0,.745,.715]\r\neaseOutSine     [.39,.575,.565,1]\r\neaseInOutSine   [.445,.05,.55,.95]\r\neaseInQuad      [.55,.085,.68,.53]\r\neaseOutQuad     [.25,.46,.45,.94]\r\neaseInOutQuad   [.455,.03,.515,.955]\r\neaseInCubic     [.55,.055,.675,.19]\r\neaseOutCubic    [.215,.61,.355,1]\r\neaseInOutCubic  [.645,.045,.355,1]\r\neaseInQuart     [.895,.03,.685,.22]\r\neaseOutQuart    [.165,.84,.44,1]\r\neaseInOutQuart  [.77,0,.175,1]\r\neaseInQuint     [.755,.05,.855,.06]\r\neaseOutQuint    [.23,1,.32,1]\r\neaseInOutQuint  [.86,0,.07,1]\r\neaseInExpo      [.95,.05,.795,.035]\r\neaseOutExpo     [.19,1,.22,1]\r\neaseInOutExpo   [1,0,0,1]\r\neaseInCirc      [.6,.04,.98,.335]\r\neaseOutCirc     [.075,.82,.165,1]\r\neaseInOutCirc   [.785,.135,.15,.86]<\/pre>\n
\u6ca1\u6709\u6211\u4eec\u60f3\u8981\u7684\u5f39\u7c27\u6548\u679c\uff0c\u4f46\u662fvelocity\u6709\u81ea\u5df1\u7684\u901f\u5ea6\u63d2\u4ef6\uff1avelocity.easeplus<\/a><\/p>\n
\u6548\u679c\u56fe\uff1ahttp:\/\/yuichiroharai.github.io\/easeplus-velocity\/sample\/<\/a><\/p>\n
\u8be5\u63d2\u4ef6\u5b98\u7f51\uff1ahttps:\/\/github.com\/yuichiroharai\/easeplus-velocity\u00a0<\/a><\/p>\n
easeplus-velocity-master<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
\u52a8\u753b\u524d\u6267\u884c<\/p>\n
$element.velocity({\r\n opacity: 0\r\n}, { \r\n \/* \u6267\u884c\u52a8\u753b\u524d \u8bb0\u5f55\u6240\u6709\u52a8\u753b \u8282\u70b9 \u6570\u91cf *\/\r\n begin: function(elements) { console.log(elements); }\r\n});<\/pre>\n
\u52a8\u753b\u7ed3\u675f\u540e\u6267\u884c<\/p>\n
$element.velocity({\r\n opacity: 0\r\n}, { \r\n \/*\u6267\u884c\u52a8\u753b\u540e \u8bb0\u5f55\u6240\u6709\u52a8\u753b \u8282\u70b9 \u6570\u91cf *\/\r\n complete: function(elements) { console.log(elements); }\r\n});<\/pre>\n
 <\/p>\n
\u5f3a\u5236\u7edf\u4e00\u8bbe\u7f6e\u6267\u884c\u65f6\u95f4<\/span><\/p>\n
\/\/\u7c7b\u4f3cjquery\u7684\u52a8\u753b\u5168\u5c40\u5c5e\u6027 $.fx.interval\r\n$.Velocity.mock = 10;<\/pre>\n
 <\/p>\n
\u8bbe\u7f6e\u8fdb\u5ea6<\/span><\/p>\n
$element.velocity({\r\n opacity: 0,\r\n tween: [ 10, 20 ] \/\/ \u8bbe\u7f6etweenValue\u6570\u503c10\u523020\r\n}, {\r\n duration: 100,\r\n progress: function(elements, complete, remaining, start, tweenValue) {\r\n elements \/\/\u6bcf\u4e00\u4e2a\u5173\u952e\u5e27\u7684\u8fd9\u4e2a\u5bf9\u8c61\r\n console.log((complete * 100) + \"%\"); \/\/\u8fd9\u52a8\u753b\u5b8c\u6210\u7684\u8fdb\u5ea6\u8fc7\u7a0b0%-100%\r\n console.log(remaining + \"ms remaining!\"); \/\/\u8fd9\u52a8\u753b\u5269\u4f59\u591a\u5c11\u65f6\u95f4\u5b8c\u6210100ms\u52300ms\r\n console.log(\"The current tween value is \" + tweenValue)\/\/\u81ea\u5b9a\u4e49\u52a8\u753b\u8fdb\u5ea6\u6570\u503c\u753120\u5f00\u59cb\u9010\u6e10    \u523010\u3002\r\n }\r\n});<\/pre>\n
\u7b80\u5199\u4e3a\uff1a<\/p>\n
$element.velocity({\r\n tween: [ 0, 1000 ]\r\n}, { \r\n easing: \"spring\",\r\n progress: function(elements, c, r, s, t) {\r\n console.log(\"The current tween value is \" + t)\r\n }\r\n});<\/pre>\n
 <\/p>\n
\u63a8\u8350\u5728\u79fb\u52a8\u8bbe\u5907\u5f00\u542ftrue<\/p>\n
$element.velocity(propertiesMap, { mobileHA: false });<\/pre>\n
 <\/p>\n
\u5faa\u73af\u6b21\u6570<\/span><\/p>\n
$element.velocity({ height: \"10em\" }, { loop: 2 });\r\n$element.velocity({ height: \"10em\" }, { loop: true }); \/\/\u65e0\u9650\u5faa\u73af<\/pre>\n
 <\/p>\n
\u6bcf\u4e2a\u52a8\u753b\u95f4\u9694\u65f6\u95f4delay<\/span><\/p>\n
$element.velocity({ \r\n height: \"+=10em\"\r\n}, { \r\n loop: 4,\r\n delay: 100\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
fadeIn and fadeOut<\/span><\/p>\n
\u4ee3\u66fffadeOut()
\n$element.velocity({ opacity: 0 }, { display: “none” }); \/\/\u6de1\u51fa \u6587\u6863\u6d41\u4e0d\u5b58\u5728
\n$element.velocity({ opacity: 0 }, { visibility: “hidden” }); \/\/\u6de1\u51fa \u6587\u6863\u6d41\u5b58\u5728<\/p>\n
fadeIn()
\n$element.velocity({ opacity: 1 }, { display: “block” });<\/p>\n
\u6216\u8005<\/p>\n
$element
\n.velocity(“fadeIn”, { duration: 1500 })
\n.velocity(“fadeOut”, { delay: 500, duration: 1500 });
\nslideUp and slideDown<\/span><\/p>\n
$element\r\n .velocity(\"slideDown\", { duration: 1500 })\r\n .velocity(\"slideUp\", { delay: 500, duration: 1500 });<\/pre>\n
 <\/p>\n
scroll\u53c2\u6570\uff08\u6548\u679c\u53ea\u517c\u5bb9IE10\u4ee5\u4e0a\uff09<\/p>\n
$element\r\n .velocity(\"scroll\", { duration: 1500, easing: \"spring\" });\r\n \/\/\u6eda\u52a8\u6761\u6eda\u52a8\u5230\u5143\u7d20\u9876\u90e8<\/pre>\n
\u4f8b\u5982\uff1a
\n$(“#element3”).velocity(“scroll”, {
\ncontainer: $(“#container”),
\nduration: 800,
\ndelay: 500
\n});<\/p>\n
\/\/#container\u662f\u53ef\u6eda\u52a8\u7684\u533a\u57dfcss\u8981\u6709position: relative;
\n#element3\u5728#container\u5185\u5bb9\u4e2d
\n\u53d6\u4ee3stop()<\/span>
\nstop() == .velocity(“stop”);\u00a0\/\/\u5f53\u524d\u52a8\u4f5c\u505c\u6b62\u5982\u679c\u4e4b\u524d\u6709\u52a8\u4f5c\u8fc7\u7684\u4ecd\u7136\u4fdd\u7559\uff0c\u540e\u7eed\u6709\u52a8\u4f5c\u7ee7\u7eed\u6267\u884c<\/p>\n
stop(true) ==.velocity(“stop”, true); \u00a0\/\/\u6240\u6709\u52a8\u4f5c\u505c\u6b62\u5982\u679c\u4e4b\u524d\u6709\u52a8\u4f5c\u8fc7\u7684\u4ecd\u7136\u4fdd\u7559\uff0c\u540e\u7eed\u4e5f\u4e0d\u6267\u884c<\/p>\n
stop(true,true)==velocity(‘finish’,true)\u00a0\/\/\u5f53\u524d\u77ac\u95f4\u5b8c\u6210\uff0c\u540e\u7eed\u4e0d\u6267\u884c<\/p>\n
.velocity(“finish”); \u00a0\/\/\u5f53\u524d\u77ac\u95f4\u5b8c\u6210\uff0c\u540e\u7eed\u52a8\u4f5c\u7ee7\u7eed \u00a0(\u8fd8\u6bd4jquery\u591a\u4e86\u4e00\u4e2a\u6548\u679c)
\n\u52a8\u753b\u540e\u9000
\n.velocity(“reverse”);
\ntranslate\u4f4d\u79fb<\/span><\/p>\n
$element.velocity({ \r\n translateX: \"200px\", \/\/X\u8f74 \u4f4d\u79fb\r\n translateY: \"200px\" \/\/Y\u8f74 \r\n});<\/pre>\n
rotate\u65cb\u8f6c<\/span><\/p>\n
$element.velocity({ \r\n rotateX: \"200px\", \/\/X\u8f74 \u4f4d\u79fb\r\n rotateY: \"200px\" \/\/Y\u8f74 \r\n rotateZ: \"200px\"\r\n});<\/pre>\n
scale\u62c9\u4f38 <\/span><\/p>\n
$element.velocity({ \r\n scaleX:'2', \/\/\u5bbd\u4e3a\u539f\u67652\u500d\r\n scaleY:'2' \/\/\u9ad8\u4e3a\u539f\u67652\u500d\r\n});<\/pre>\n
 <\/p>\n
 <\/p>\n
textShadowX, textShadowY, and textShadowBlur\r\n$element.velocity({ textShadowBlur: \"10px\" });<\/pre>\n
.hook<\/span>\u8bbe\u7f6e\u3001\u83b7\u53d62D,3D\u5c5e\u6027\u503c \u7c7b\u4f3ccss()<\/p>\n
$.Velocity.hook($('div'),\"translateX\",\"200px\"); \/\/\u8bbe\u7f6e\r\n$.Velocity.hook($('div'),\"translateY\",\"200px\"); \/\/\u8bbe\u7f6e<\/pre>\n
alert( $.Velocity.hook($('div'), \"translateX\") ) \/\/\u83b7\u53d6<\/pre>\n
\u652f\u6301\u51fd\u6570\u4f20\u503c<\/p>\n
$element.velocity({\r\n translateX: function(i, total) { \r\n   return i * 10;\r\n }\r\n});<\/pre>\n
\u989c\u8272\u6e10\u53d8<\/span><\/p>\n
$('#ni').velocity({\r\n  color:'#eff716', \/\/\u5b57\u4f53\u989c\u8272\u6e10\u53d8\r\n  backgroundColor:'#000', \/\/\u80cc\u666f\u989c\u8272\u6e10\u53d8\r\n  backgroundColorAlpha: 0.2,\/\/\u80cc\u666f\u989c\u8272\u900f\u660e\u5ea6\u6e10\u53d8\r\n  colorRed: \"50%\", \/\/\u7ea2\u7eff\u84dd\u4e09\u8272\u4e2d\u7684\u7ea2\u6e10\u53d8\uff0c\u652f\u6301\u767e\u5206\u6bd4\u6e10\u53d8\r\n  colorGreen: \"+=150\",\r\n  colorBlue: \"+=150\",\r\n  colorAlpha: 0.3 \/\/\u5b57\u4f53\u989c\u8272\u900f\u660e\u5ea6\u6e10\u53d8\r\n },4000);<\/pre>\n
 <\/p>\n
\u80cc\u666f\u56fe\u7247\u5b9a\u4f4d<\/span><\/p>\n
'<\/span>background-position-x'<\/span><\/span>:<\/span> ['<\/span>-600px'<\/span><\/span>, '<\/span>0px'<\/span><\/span>]    \/\/0\u5230-600px<\/pre>\n
 <\/p>\n
 <\/p>\n
\u56de\u8c03<\/span><\/p>\n
\/\/\u5bf9IE\u7684\u517c\u5bb9\u6027\u4e0d\u662f\u5f88\u597d\r\n$.Velocity.animate($('#ni'), { opacity: 0.5 },3000)\r\n\u00a0.then(function(elements) { alert($(elements).attr('id')) }) \/\/\u6210\u529f\u540e\u6267\u884c\r\n\u00a0.catch(function(error) { console.log(\"Rejected.\"); }); \/\/\u5931\u8d25\u540e\u6267\u884c<\/pre>\n
 <\/p>\n
 <\/p>\n
—————-\u9ad8\u7ea7\u5e94\u7528————————–<\/strong><\/p>\n
$('.c').velocity({\r\n  translateX: function(index, num) { \/\/\u9664\u4e86\u76f4\u63a5\u8bbe\u7f6e\u503c\uff0c\u8fd8\u80fd\u6dfb\u52a0\u65b9\u6cd5\uff0c(\u7d22\u5f15,\u603b\u6570)\u7c7b\u4f3c$.each\r\n     console.log(total);\r\n     return (i * 20);\r\n  }\r\n });\r\n\r\n\u6548\u679c\u662f\u6279\u91cf\u5bf9class\u4e3a.c\u7684\u5143\u7d20\u8bbe\u7f6etranslateX\u503c\u3002\r\n\u5176\u4ed6\u5c5e\u6027\u4e5f\u53ef\u4ee5\u8fd9\u4e48\u5199\uff0c\u8981\u4e3e\u4e00\u53cd\u4e09\u3002<\/pre>\n
 <\/p>\n
——————-\u6269\u5c55\u7ec4\u4ef6———————–<\/strong><\/p>\n
velocity.ui.js \u6269\u5c55\u7ec4\u4ef6 \uff08\u517c\u5bb9IE8\u4ee5\u4e0a\uff09<\/p>\n
\u6709\u65f6\u5019\u901a\u8fc7\u56de\u8c03\u8981\u5b8c\u6210\u4e00\u7cfb\u5217\u7684\u52a8\u4f5c\u4f8b\u5982\r\n$element1.velocity({ translateX: 100 }, 1000, function() {\r\n   $element2.velocity({ translateX: 200 }, 1000, function() {\r\n      $element3.velocity({ translateX: 300 }, 1000);\r\n   });\r\n});<\/pre>\n
\u5f15\u5165velocity.ui.js\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5c06\u4ee3\u7801\u5199\u6210\uff1a<\/p>\n
var mySequence = [\r\n  { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },\r\n  { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },\r\n  { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }\r\n];\r\n\r\n$.Velocity.RunSequence(mySequence); \/\/\u6267\u884c\u4ee5\u4e0a\u52a8\u4f5c<\/pre>\n
\u5982\u679c\u5728\u4ee5\u4e0a\u4f17\u591a\u52a8\u4f5c\u505a\u4e2d\u67d0\u4e00\u4e2a\u52a8\u4f5c\u4e0d\u9700\u8981\u56de\u8c03\u7b49\u5f85\uff0c\u800c\u662f\u5f00\u59cb\u65f6\u5019\u5c31\u6267\u884c\u53ef\u4ee5\u52a0\u4e0a<\/p>\n
{ e: $element2, p: { translateX: 200 }, o: { duration: 1000, sequenceQueue: false },\r\n\/\/\u4e0d\u9700\u8981\u7b49\u4e0a\u4e00\u4e2a\u52a8\u4f5c\uff0c\u800c\u662f\u76f4\u63a5\u53ef\u4ee5\u52a0\u8f7d\u9875\u9762\u7684\u65f6\u5019\u5c31\u5f00\u59cb\u6267\u884c<\/pre>\n
velocity.ui.js\u7ec4\u4ef6\u8fd8\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u8ddfanimate.css\u7c7b\u4f3c\u7684\u529f\u80fd\u3002<\/p>\n
$('.c').velocity('transition.slideUpIn', \r\n  { stagger: 2000,backwards: true,drag: true}\/\/2\u79d2\u56de\u8c03\u4e00\u4e2a\u6548\u679c\uff0c\u5411\u540e\u6548\u679c\uff0c\u52a8\u753b\u7d27\u51d1\r\n)\r\n.delay(3150) \/\/3.15\u79d2\u540e\u6267\u884c\u4e0b\u4e00\u6b65\r\n.velocity({ opacity: 0 }, 750);<\/pre>\n
\u6848\u4f8b\uff1ahttp:\/\/www.smashingmagazine.com\/2014\/06\/18\/faster-ui-animations-with-velocity-js\/<\/a>
\n\u66f4\u591a\u6548\u679c\u9884\u89c8\uff1ahttp:\/\/julian.com\/research\/velocity\/#uiPack<\/a><\/p>\n
\u5982\u679c\u5185\u7f6e\u7684\u52a8\u753b\u6ca1\u6709\u4f60\u60f3\u8981\u7684\u8fd8\u53ef\u4ee5\u81ea\u5b9a\u4e49\u52a8\u753b<\/p>\n
$.Velocity.RegisterUI(\"callout.zidingyi\", {\r\n    defaultDuration: 3000, \/\/\u9ed8\u8ba4\u8fc7\u6e21\u65f6\u95f4\r\n      calls: [ \r\n        [ { rotateZ: 1080 }, 0.50 ],\r\n        [ { scaleX: 0.5 }, 0.25, { easing: \"spring\" } ],\r\n        [ { scaleX: 1 }, 0.25, { easing: \"spring\" } ]\r\n      ]\r\n   });\r\n$('.c').velocity('callout.zidingyi'); \/\/\u8c03\u7528<\/pre>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
\u66f4\u591a\u5185\u5bb9\u8fd8\u9700\u8981\u4e0ahttp:\/\/julian.com\/research\/velocity\/<\/p>\n
http:\/\/velocityjs.org\/<\/a>
\n\u6848\u4f8b\u4e0b\u8f7d<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Velocity.js\u7b14\u8bb0 velocity.min\u00a01.2.1 velocity.min\u00a01.2.3 \u76ee\u524d\u6700 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-3453","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3453"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3453\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}