jQuery练习动画效果

1、

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 6   </head>
 7   <body>
 8     <p>
 9         <img src="../images/zgl.jpg"/>
10     </p>      
11     <div>
12         <!-- 加载完毕 -->
13     </div>
14     <script type="text/javascript">
15         /*$("p").first().show(5000,function(){
16             $("div").first().html("<font color='red'>加载完毕</font>");
17         });*/
18         $("p").first().hide(5000,function(){
19             $("div").first().html("<font color='red'>隐藏完毕</font>");
20         });
21     </script>
22   </body>
23 </html>

2、

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 6    </head>
 7   <body>
 8     <span style="display:none">
 9         <img src="../images/zgl.jpg" />
10     </span>      
11     <div>
12     </div>
13     <script type="text/javascript">
14         $("span").first().fadeIn(5000,function(){
15             $("div").first().text("淡入显示图片");
16         });
17         
18         /*$("span").first().fadeOut(5000,function(){
19             $("div").first().text("淡出隐藏图片");
20         });*/
21     </script>        
22   </body>
23 </html>

3、

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 6   </head>
 7   <body>
 8     <div style="display:none">
 9         中国0<br/>    
10         中国1<br/>    
11         中国2<br/>    
12         中国3<br/>    
13         中国4<br/>    
14         中国5<br/>    
15         中国6<br/>    
16         中国7<br/>    
17         中国8<br/>    
18         中国9<br/>    
19     </div>  
20     <input type="button" value="我的好友"/>
21     <script type="text/javascript">
22         $("div").first().slideDown(5000);
23         
24         
25         //$(":input").click(function(){
26         //    $("div").slideUp(1000);
27         //});
28     </script>    
29   </body>
30 </html>

4、鼠标移进来-显示则隐藏，隐藏则显示

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5      <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
 6   </head>
 7   <body>
 8     <div style="border-style:dotted;border-2px;100px;height:100px"> 
 9         <img src="../images/zgl.jpg"/>     
10     </div>
11     <script type="text/javascript">
12         var isShow = true;//表示显示
13         $("div").first().mousemove(function(){
14             //如果原来是显示的
15             if(isShow){
16                 //则隐藏
17                 $("img").first().fadeOut(1000,function(){
18                     isShow = false;//表示隐藏
19                 });
20             //如果原来是隐藏的    
21             }else if(!isShow){
22                 //则显示
23                 $("img").first().fadeIn(1000,function(){
24                     isShow = true;//表示显示                
25                 });
26             }
27         });
28     </script>
29   </body>
30 </html>