17jquery学习笔记-------动画----图片在网页中移动，改变样式

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>

 

posted on 2016-01-13 22:48  努力的活着_在人间  阅读(228)  评论(0)    收藏  举报

导航