animate auto

只能临时用用..千万别直接放在生产环境中...

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head>
 6 
 7   <title></title>
 8   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
 9 </script>
10 </head>
11 
12 <body>
13   <div style="overflow:hidden;border:1px solid #000">
14     <div id="test" style="">
15       <br />
16       <br />
17       <br />
18       一些长文字<br />
19       <br />
20       <br />
21     </div>
22   </div>
23 
24   <div id="a" style="display:none">
25     <br />
26     <br />
27     <br />
28     <br />
29     <br />
30     更长的文字<br />
31     <br />
32     <br />
33     <br />
34     <br />
35     <br />
36     <br />
37     <br />
38     <br />
39     <br />
40     <br />
41     <br />
42     <br />
43     <br />
44     <br />
45   </div>
46 
47     <input type="button" value="pull" id="bb" />
48 
49     <script type="text/javascript">
50         $('#bb').click(function(){            
51             $('#test').parent().height($('#test').parent().outerHeight());
52             $('#test').html( $('#a').html() )
53             $('#test').parent().animate({height:$('#test').outerHeight()},function(){
54                     setTimeout(function(){$('#test').parent().css('height','auto')},800);
55             });
56             //alert($('#test').height())
57         })
58     </script>
59 
60 </body>
61 </html>
posted @ 2012-11-15 11:26  无嗔  阅读(326)  评论(0)  编辑  收藏  举报