標籤：
animate：animate內部設定的多個值是同步變化的，鏈式的 animate是依次動畫的。
例子：animate({ left: 0, top: 0, width: 300, height: 300 },3000) .animate({ opacity: 0 }).animate({ opacity: 1 })。還可以指定增量，$(“#div1”).animate({ height: “+=100” });
//如果 是+=、-=等增量形式要寫成字串，因為JavaScript不認識這種文法
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title></title> 5 <script src="jquery-1.8.3.js"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $(‘:button‘).click(function () { 9 $(‘img‘).animate({ ‘left‘: ‘20px‘, ‘top‘: ‘500px‘, ‘width‘: ‘30px‘, ‘height‘: ‘30px‘ }, 3000).animate({ ‘top‘: ‘20px‘, ‘left‘: ‘600px‘, ‘width‘: ‘100px‘, ‘height‘: ‘100px‘ }, 3000).animate({‘top‘:‘+=400px‘,‘left‘:‘-=500px‘},3000);10 });11 });12 13 14 </script>15 </head>16 <body>17 <input type="button" name="name" value="小鳥飛起來" />18 <br/>19 <img style="position:absolute;" src="2.png" />20 </body>21 </html>
17jquery學習筆記-------動畫----圖片在網頁中移動，改變樣式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
