所谓综合动画,就是在链式表达式依次执行相关animate函数,其中的参数是以键值对的方式存在的。
如下示例,就展示了一个基本的综合动画。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>自定义简单动画</title> 8 <meta name="author" content="Administrator" /> 9 <script type="text/javascript" src="script/jquery-1.12.2.js"></script> 10 <style type="text/css"> 11 #panel { 12 position: absolute; 13 width: 100px; 14 height: 100px; 15 border: 1px solid #0050D0; 16 background: #96E555; 17 cursor: pointer; 18 } 19 </style> 20 <!-- Date: 2016-03-29 --> 21 </head> 22 <body> 23 <div id="panel"></div> 24 <script type="text/javascript"> 25 $(function() { 26 $("#panel").css("opacity", "0.5"); 27 $("#panel").bind("click", (function() { 28 $(this).animate({ 29 left : "400px", 30 height : "200px", 31 opacity : "1" 32 }, 3000).animate({ 33 top : "200px", 34 width : "200px" 35 }, 3000).fadeOut("slow"); 36 })); 37 }); 38 </script> 39 </body> 40 </html>