jQuery动画效果实现

浏览数：24 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>jQuery动画特效</title>
 6         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
 7         <style>
 8         div{
 9             position:absolute;
10             top:50px;
11             left:200px;
12             height:50px;
13             width:50px;
14             border:1px solid red;   
15         }
16         </style>
17     </head>
18     <body>
19         <div></div>
20         <input id="leftmove" type="button" value="左移"/>
21         <input id="rightmove" type="button" value="右移"/>
22         <script type="text/javascript">
23             $(function(){
24                 $ltime=0;
25                 $rtime=0;
26                $("#leftmove").bind("click",function(){//绑定元素事件
27                    $ltime++;
28                    $("div").animate({//调用animate制作移动动画
29                        left:‘-=50px‘
30                    },600,function(){
31                        $("div").html("左移"+$ltime+"次!");
32                    });
33                });
34                $("#rightmove").bind("click",function(){
35                    $rtime++;
36                    $("div").animate({
37                        left:‘+=50px‘
38                    },600,function(){
39                        $("div").html("右移"+$rtime+"次!");
40                    });
41                }); 
42             });
43         </script>
44     </body>
45 </html>