jquery \u5300\u52a0\u901f \u5300\u51cf\u901f \u52a0\u901f\u5ea6<\/p>\n
HTML\u7ed3\u6784<\/p>\n
<div class=\"aa\">\u70b9\u51fb\u8fd9\u91cc\u67e5\u770b\u666e\u901a\u6548\u679c\u8ddf\u4e0b\u9762\u5bf9\u6bd4<\/div>\r\n<div class=\"bb\">\u4f7f\u7528 easeInOutCirc \u7684\u7f13\u51b2\u8fc7\u6e21\u6548\u679c<\/div>\r\n<div class=\"cc\">easeInQuint \u6548\u679c + \u56de\u8c03\u51fd\u6570<\/div>\r\n<div class=\"dd\">hide() \u65b9\u6cd5\u7f13\u51b2\u6d88\u5931<\/div><\/pre>\n<\/p>\n
CSS\u4ee3\u7801<\/p>\n
.aa,.bb,.cc,.dd{width:300px;background:#ccc;padding:5px;margin-bottom:10px;cursor:pointer;}<\/pre>\nJS<\/p>\n
$(function(){\r\n\t\t\r\n\t\r\n\t\t$('.aa').click(function(){\r\n\t\t\t$(this).animate({'width':'700'},1000).animate({'width':'300'},1000);\r\n\t\t\t$('.bb').animate({'width':'700'},{duration:1000,easing:'easeInOutCirc'}).animate({'width':'300'},{duration:1000,easing:'easeInOutCirc'});\r\n\t\t\t$('.cc').animate({'width':'700'},{duration:1000,easing:'easeInQuint'}).animate({'width':'300'},{duration:1000,easing:'easeInQuint',complete:function(){ alert('\u6ed1\u56de\u6765\u4e86'); }});\r\n\t\t\t$('.dd').hide({duration:1000,easing:'easeInQuint'}).show({duration:1000,easing:'easeInQuint'});\r\n\t\t});\r\n\t\t$('.bb').click(function(){\r\n\t\t\t$(this).animate({'width':'700'},{duration:1000,easing:'easeInOutCirc'}).animate({'width':'300'},{duration:1000,easing:'easeInOutCirc'});\r\n\t\t});\r\n\t\t$('.cc').click(function(){\r\n\t\t\t$(this).animate({'width':'700'},{duration:1000,easing:'easeInQuint'}).animate({'width':'300'},{duration:1000,easing:'easeInQuint',complete:function(){ alert('\u6ed1\u56de\u6765\u4e86'); }});\r\n\t\t});\r\n\t\t$('.dd').click(function(){\r\n\t\t\t$(this).hide({duration:1000,easing:'easeInQuint'}).show({duration:1000,easing:'easeInQuint'});\r\n\t\t});\r\n\t\r\n\t});<\/pre>\n<\/p>\n
\u6ce8\u610f<\/span><\/p>\n
\/\/\u6b64\u63d2\u4ef6\u652f\u6301\u7b2c\u4e8c\u79cd\u5199\u6cd5\r\n$('div').animate({left:'200px'},'bounceinout'); \/\/\u4e0d\u652f\u6301\r\n\r\n$('div').animate({left:'200px'},{easing:'easeInOutBounce'}); \/\/\u652f\u6301<\/pre>\n<\/p>\n
\u5206\u6790\u6b64\u63d2\u4ef6\uff1a<\/p>\n
\/\/\u8981\u6269\u5c55jQuery\u7684\u901f\u5ea6\u6548\u679c\uff0c\u5176\u5b9ejQuery\u5bf9\u5916\u5df2\u7ecf\u63d0\u4f9b\u4e86\u4e00\u4e2a\u6269\u5c55\u63a5\u53e3,jQuery.easing<\/span>\r\n\r\njQuery.easing.easeOutBounce<\/span>=function (x, t, b, c, d) { \/\/\u53c2\u6570\u662fjQuery\u5185\u7f6e\u53c2\u6570\uff0c\u5177\u4f53\u8981\u7ffb\u9605jQuery\u6e90\u7801\r\n if ((t\/=d) < (1\/2.75)) {\r\n return c*(7.5625*t*t) + b;\r\n } else if (t < (2\/2.75)) {\r\n return c*(7.5625*(t-=(1.5\/2.75))*t + .75) + b;\r\n } else if (t < (2.5\/2.75)) {\r\n return c*(7.5625*(t-=(2.25\/2.75))*t + .9375) + b;\r\n } else {\r\n return c*(7.5625*(t-=(2.625\/2.75))*t + .984375) + b;\r\n }\r\n}\r\n\r\n\r\n$('div').animate({left:'200px'},{easing:'easeOutBounce<\/span>'});\r\n\r\n<\/pre>\n<\/p>\n
\u52a0\u901f\u5ea6\u56fe\u8868\uff1a\u00a0https:\/\/sdeno.com\/easings\/<\/a><\/p>\n