{"id":5044,"date":"2016-05-27T11:08:51","date_gmt":"2016-05-27T03:08:51","guid":{"rendered":"https:\/\/sdeno.com\/?p=5044"},"modified":"2016-06-03T14:48:54","modified_gmt":"2016-06-03T06:48:54","slug":"%e4%bb%a3%e6%9b%bfjquery%e7%9a%84animate%e5%b1%9e%e6%80%a7%e6%8f%92%e4%bb%b6-jquery-gsap-js","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5044","title":{"rendered":"\u4ee3\u66ffjquery\u7684animate\u5c5e\u6027\u63d2\u4ef6--jquery.gsap.js"},"content":{"rendered":"

\u53d6\u4ee3 jquery animate<\/p>\n

<\/div>
<\/div><\/div><\/div>\"jquery.gsap_thumb\"<\/figure><\/a>\n

jquery\u7684\u52a8\u753b\u5c5e\u6027animate\u6267\u884c\u7684\u6548\u7387\u4f4e\uff0c\u56e0\u4e3a\u8003\u8651\u517c\u5bb9\u6027\u505a\u4e86\u5f88\u591a\u5224\u65ad\u7684\u539f\u56e0\u3002\u73b0\u5728\u51fa\u73b0\u4e86\u8bb8\u591a\u7279\u6548\u6267\u884c\u7684\u6548\u7387\u8fdc\u8fdc\u9ad8\u4e8ejquery\u3002\u4e4b\u524d\u4e5f\u6709\u4ecb\u7ecd\u8fc7\u4e00\u63d2\u4ef6\u300avelocity.js\u4e2d\u6587\u624b\u518c velocity\u53d6\u4ee3jQuery animate()\u7684\u63d2\u4ef6<\/a>\u300b\u3002<\/p>\n

\u52a0\u4e0ajquery\u672c\u8eab\u4e5f\u6ca1\u6709\u989c\u8272\u6e10\u53d8\u4e5f\u4e0d\u652f\u6301transforms\u5c5e\u6027\u7684\u6e10\u53d8\u3002<\/p>\n

\u73b0\u5728\u4ecb\u7ecd\u53e6\u4e00\u4e2a\u63d2\u4ef6jquery.gsap.js\uff0c\u6838\u5fc3\u662fTweenMax.js<\/a>\u5b83\u624d\u662f\u52a8\u753b\u6267\u884c\u4ee3\u7801\u800c\u4e14\u7248\u672c\u5fc5\u987b\u5927\u4e8e1.8.0\uff0c\u4e0e\u5176\u8bf4\u4ecb\u7ecdjquery.gsap.js\u8fd8\u4e0d\u5982\u8bf4\u4ecb\u7ecdTweenMax.js<\/a>\u3002jquery.gsap.js\u662f\u57fa\u4e8eTweenMax.js<\/a>\u4e0a\u6269\u5c55\u7684\u597d\u5904\u5c31\u662fAPI\u8ddfjquery\u7684animate\u4e00\u6837\u4e0d\u9700\u8981\u53bb\u91cd\u65b0\u5b66\u4e60\u65b0\u7684API\u8fd9\u4e5f\u662f\u5b83\u8ddfvelocity.js<\/a>\u4e00\u6837\u7684\u4f18\u70b9\uff0c\u517c\u5bb9\u6027\u5f88\u597d\uff0c\u4e5f\u4e0d\u9700\u8981\u53bb\u5199\u4e13\u95e8\u7684\u517c\u5bb9\u524d\u7f00\u6837\u5f0f\uff0c\u5982-0-,webkit-.<\/p>\n

\u5173\u4e8eTweenMax.js<\/a>\u540e\u9762\u8fd8\u4f1a\u7ee7\u7eed\u4ecb\u7ecd\u5b83\uff0c\u56e0\u4e3a\u5b83\u6709\u81ea\u5df1\u7684API\u53ef\u4ee5\u9009\u62e9\u6027\u7684\u4f7f\u7528jquery.gsap.js\u8f85\u52a9\u63d2\u4ef6\uff0c\u8fd8\u6709\u5176\u4ed6\u5f88\u591a\u5f3a\u5927\u7684\u63d2\u4ef6\u3002<\/p>\n

\u9996\u5148\u52a0\u8f7d\uff1a<\/strong><\/p>\n

\u52a0\u8f7d\u65b9\u5f0f\u4e00:\uff08\u63a8\u8350\uff09\r\n<script src=\"jquery-1.8.3.min.js\"><\/script>\r\n<script src=\"TweenMax.min.js\"><\/script>\r\n<script src=\"jquery.gsap.min.js\"><\/script>\r\n\r\n\u6216\u8005\uff1a\r\n\r\n\u52a0\u8f7d\u65b9\u5f0f\u4e8c:\r\n<script src=\"jquery-1.8.3.min.js\"><\/script>\r\n<script src=\"js\/plugins\/CSSPlugin.min.js\"><\/script>\r\n<script src=\"js\/easing\/EasePack.min.js\"><\/script>\r\n<script src=\"js\/TweenLite.min.js\"><\/script> \r\n<script src=\"js\/jquery.gsap.min.js\"><\/script><\/pre>\n
\u4ee3\u7801\u98ce\u683c\uff1a<\/strong><\/p>\n
$(\"#box\").animate(\r\n{ \r\n  x:'10px',\r\n  scaleX:'3',\r\n  skipGSAP:true,  \/\/\u7981\u7528GSAP\r\n}, \r\n{\r\n  duration:1000, \/\/1\u79d2\u5185\u5b8c\u6210\u52a8\u753b\r\n  easing:\"easeOutStrong\", \/\/\u52a0\u901f\u5ea6\r\n  complete:function(){ \/\/\u52a8\u753b\u6267\u884c\u5b8c\u6bd5\u540e\u56de\u8c03\r\n    document.title=111\r\n  }\r\n});<\/pre>\n
 <\/p>\n
\u53e6\u4e00\u79cd\u98ce\u683c\uff1a<\/strong><\/p>\n
$('#box').animate(\r\n  {\r\n   css:{\r\n     left:100,\r\n     opacity:0.3\r\n   },\r\n   startAt:{left:10}, \/\/\u521d\u59cb\u5316\r\n   delay:0, \/\/1\u79d2\u540e\u5f00\u59cb\u6267\u884c\u52a8\u753b\r\n   ease:Back.easeOut, \/\/\u52a0\u901f\u5ea6\u6548\u679c\r\n   repeat:0, \/\/\u591a\u5faa\u73af1\u6b21\uff0c\u4e5f\u5c31\u662f\u4e00\u5171\u91cd\u590d\u6267\u884c\u4e862\u6b21\u540c\u6837\u7684\u52a8\u753b\uff0c-1\u5c31\u4f1a\u65e0\u9650\u91cd\u590d\u5faa\u73af\r\n   repeatDelay:0, \/\/\u6bcf\u6b21\u91cd\u590d\u5faa\u73af\u65f6\u95f43\u79d2,\u9700\u8981\u914d\u5408repeat\u5c5e\u6027\r\n   yoyo:false, \/\/\u5982\u679ctrue\uff0c\u52a8\u753b\u7684\u5faa\u73af\u662f\u5012\u5e8f\uff0c\u9700\u8981\u914d\u5408repeat\u5c5e\u6027\r\n   paused:false, \/\/\u5982\u679ctrue,\u52a8\u753b\u6682\u505c\r\n   overwrite:'auto',\r\n   onStart:function(){ \/\/\u52a8\u753b\u5f00\u59cb\u524d\u56de\u8c03\r\n     document.title='\u5f00\u59cb\u524d\u6267\u884c'\r\n   },\r\n   onStartParams:[\"{self}\", \"\u53c2\u6570\"],\r\n   onComplete:function(a,b){ \/\/\u52a8\u753b\u7ed3\u675f\u540e\u56de\u8c03\r\n     document.title='\u52a8\u753b\u5b8c\u6210'\r\n   },\r\n   onCompleteParams:[\"{self}\", \"param2\"], \/\/\u4e3aonComplete\u4f20\u53c2\u6570\uff0c\u5176\u4e2d{self}\u503c\u7684\u662fmov\r\n   immediateRender:true,\r\n   onUpdate:function(a,b){ \/\/\u521d\u59cb\u5316\u6267\u884c\u4e00\u6b21\uff0c\u52a8\u753b\u8fc7\u7a0b\u56de\u8c03\uff0c\u4ee5\u540e\u52a8\u753b\u6709\u8fd0\u52a8\u90fd\u8fd8\u4f1a\u4e0d\u505c\u7684\u6267\u884c\uff0c\u76f4\u5230\u52a8\u753b\u7ed3\u675f\u624d\u505c\u6b62\r\n     \/\/ console.log(a.isActive());\r\n   },\r\n   onUpdateParams:[\"{self}\", \"\u53c2\u6570\"], \/\/\u4e3aonUpdate\u63d0\u4f9b\u53c2\u6570\r\n   useFrames:false\r\n  }\r\n);<\/pre>\n
 <\/p>\n
\u94fe\u5f0f\u5199\u6cd5\uff1a<\/p>\n
$('#box').animate({\r\n   left:100,\r\n   borderColor:'red'\r\n},{\r\n   duration:5000\r\n})\r\n.animate({\r\n   top:100,\r\n   borderColor:'yellow'\r\n},{\r\n   duration:2000\r\n});<\/pre>\n
API\u6587\u6863\u53c2\u8003\uff1a\u300a\u63a8\u8350\uff1a\u52a8\u753b\u5e93GSAP<\/a>\u300b<\/p>\n
 <\/p>\n
2D\u30013Dtransforms<\/span><\/p>\n
\u65cb\u8f6c\uff1a\r\n rotationX rotationY rotationZ\r\n \u4e0d\u6307\u5b9a\u5750\u6807\u9ed8\u8ba4\u4ee5rotationZ\u65cb\u8f6c\r\n {rotationX:'30deg'}<\/pre>\n
\u7f29\u653e\uff1a \r\n scaleX, scaleY\r\n {scaleX:'3'} \/\/\u5bbd\u4e3a\u539f\u6765\u76843\u500d<\/pre>\n
\u503e\u659c\uff1a\r\n skewX, skewY\r\n {skewX:'30deg'}<\/pre>\n
\u4f4d\u79fb\uff1a\r\n x, y\r\n {x:'30px'}<\/pre>\n
\u6df1\u666f\u8272\r\n {perspective:'500px'}<\/pre>\n
\u00a0\u65cb\u8f6c\u4e2d\u5fc3\r\n{transformOrigin:\"left top\"}\r\n{transformOrigin:\"left 50% -200\"} \/\/\u5de6\u504f\u79fb50%\u53c8\u51cf\u53bb200<\/pre>\n
 <\/p>\n
\u00a0\u989c\u8272\u6e10\u53d8<\/span><\/p>\n
\u5b57\u4f53\u989c\u8272\r\n{color:'red'}<\/pre>\n
\u80cc\u666f\u989c\u8272\r\n{backgroundColor:'red'}<\/pre>\n
\u8fb9\u6846\u989c\u8272\r\n{borderColor:'red'}<\/pre>\n
 <\/p>\n
\u9634\u5f71<\/span><\/p>\n
\u5b57\u4f53\u9634\u5f71\r\n{ textShadow:\"10px 10px 10px red\"}\r\n{ textShadow:\"10px 10px 10px rgba(255, 255, 255, 0.5)\"}<\/pre>\n
\u5143\u7d20\u9634\u5f71\r\nboxShadow: \"10px 10px 10px 10px #000\"<\/pre>\n
 <\/p>\n
\u5706\u89d2<\/span><\/p>\n
borderRadius:\"25px\"<\/pre>\n
\u00a0<\/span><\/p>\n
\u56fe\u7247\u80cc\u666f\u5b9a\u4f4d<\/span><\/p>\n
backgroundPosition:\"-25px -25px\"<\/pre>\n
 <\/p>\n
clip<\/span> \u526a\u5207\/\u88c1\u526a \u00a0\/\/\u63d0\u4f9b4\u79cd\u6848\u4f8b\u6548\u679c<\/p>\n
{clip:\"rect(50px 100px 50px 0px)\"} \/\/\u4e2d\u95f4\u5f00\u59cb\u5230\u4e0a\u4e0b\u5c55\u793a\r\n{clip:\"rect(100px 0px 100px 0px)\"} \/\/\u5de6\u4e0b\u5f00\u59cb\u5230\u53f3\u4e0a\u5c55\u793a\r\n{clip:\"rect(50px 50px 50px 50px)\"} \/\/\u4e2d\u95f4\u5230\u56db\u5468\r\n{clip:\"rect(0px 100px 100px 100px)\"} \/\/\u53f3\u5230\u5de6<\/pre>\n
 <\/p>\n
\u00a0\u7981\u7528TweenMax<\/span>\u6548\u679c\uff0c\u4f46\u4fdd\u7559jquery\u7684animate\u81ea\u5e26\u6548\u679c<\/p>\n
$(\"#box\").animate({\r\n   x:'290px',  \/\/\u6ca1\u6548\u679c\r\n   backgroundColor:'yellow',  \/\/\u6ca1\u6548\u679c\r\n   left:'290px', \/\/jquery\u81ea\u5e26\u7684\u6709\u6548\u679c\r\n   skipGSAP<\/span>:true \/\/\u7981\u7528GSAP\r\n }, {\r\n   duration:1000,\r\n   complete:function(){\r\n   document.title=111\r\n  }\r\n});<\/pre>\n
 <\/p>\n
className<\/span> \u589e\/\u5220\u7c7b\u540d<\/p>\n
$('.box').animate({\r\n  className:'+=av' \/\/\u6548\u679c\u4e3aclas=\"box av\"\r\n  className:'-=av' \/\/\u5982\u679c\u4e4b\u524d\u662fclas=\"box av\" \u90a3\u4e48\u73b0\u5728\u662fclas=\"box\"\r\n});<\/pre>\n
 <\/p>\n
\u52a8\u753b\u505c\u6b62<\/span><\/p>\n
\u53ef\u4ee5\u7528jquery\u81ea\u5e26\u7684stop()\u662f\u517c\u5bb9\u7684<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
\u53d6\u4ee3 jquery animate jquery\u7684\u52a8\u753b\u5c5e\u6027animate\u6267\u884c\u7684\u6548\u7387\u4f4e\uff0c\u56e0\u4e3a\u8003\u8651\u517c\u5bb9\u6027\u505a\u4e86\u5f88\u591a\u5224 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,38],"tags":[],"class_list":["post-5044","post","type-post","status-publish","format-standard","hentry","category-11","category-gsap"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5044","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=5044"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5044\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}