JQ动画效果测试 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>JQ动画效果测试</title>
 6         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 7         <script>
 8             $(function(){
 9                 
10                 $("#btn1").click(function(){
11                     $("#img1").show(3000);
12                 });
13                 
14                 $("#btn2").click(function(){
15                     $("#img1").hide(3000);
16                 });
17                 
18                 $("#btn3").click(function(){
19                     $("#img1").slideDown(3000);
20                 });
21                 
22                 $("#btn4").click(function(){
23                     $("#img1").slideUp(3000);
24                 });
25                 
26                 $("#btn5").click(function(){
27                     $("#img1").fadeIn(3000);
28                 });
29                 
30                 $("#btn6").click(function(){
31                     $("#img1").fadeOut(3000);
32                 });
33                 
34                 $("#btn7").click(function(){
35                     $("#img1").animate({width:"1200px",opacity:"1"},3000);
36                 });
37                 
38                 $("#btn8").click(function(){
39                     $("#img1").animate({width:"200px",opacity:"0.2"},3000);
40                 });
41             });
42         </script>
43     </head>
44     <body>
45         <input type="button" value="show()" id="btn1"/>
46         <input type="button" value="hide()" id="btn2"/>
47         <input type="button" value="slideDown()" id="btn3"/>
48         <input type="button" value="slideUp()" id="btn4"/>
49         <input type="button" value="fadeIn()" id="btn5"/>
50         <input type="button" value="fadeOut()" id="btn6"/>
51         <input type="button" value="animate()" id="btn7"/>
52         <input type="button" value="animate()" id="btn8"/><br />
53         <img src="../img/1.jpg" id="img1" width="1200px"/>
54     </body>
55 </html>

 

posted @ 2020-04-09 11:08  yxfyg  阅读(188)  评论(0)    收藏  举报