jQuery 隐藏图片

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>隐藏图片</title>
 6 <style>
 7     .style1
 8     {
 9         width:150px;
10         height:200px;
11         margin:0;
12         padding:0;
13     }
14     .style2
15     {
16         position:absolute;
17     }
18     div
19     {
20         position:absolute;
21         top:200px;
22         left:200px;
23     }
24 </style>
25 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
26 <script type="text/javascript">
27     $(function(){
28         
29         $('#img1').mouseover(function(){
30             id= "img1";
31             var img = $('#' +  id);
32             var h = img.height();
33             
34             var orignTop = $(img).position().top;
35             var pos = img.position();
36             var half = h / 2 + orignTop;
37             
38             img.css({top:orignTop});
39             img.toggleClass("style2");
40             
41             img.animate({
42                 top:half,//pos.top < half ? pos.top + step : half ,
43                 height:0//$(this).height() - step
44             },3000,function(){
45                 img.toggleClass("style2");
46             });
47             
48         });
49         //$('#btnTest1').mouseover(function(){$('#btnTest2').click();});
50         
51     });
52 </script>
53 </head>
54 
55 <body>
56 <!--<input type="button" value="按钮1" id="btnTest1" />
57 <input type="button" value="按钮2" id="btnTest2" />-->
58 <div>
59     <img src="img1.JPG" class="style1" id="img1" />
60 </div>
61 </body>
62 </html>