如何用jQuery實現調整大小的動畫？

Question

當容器調整大小時，（文本）內的所有內容也應相應地縮放。

有沒有可以實現這個的插件？

Answer 1

HTML：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.7.2.custom.js"></script> 
<link rel="stylesheet" type="text/css" href="ui.all.css"/> 

<div id="container" class="ui-widget-content" 
    style="font-size:10px;width:100px;height:100px;padding:0.5em;">   
    <div class="ui-widget-header">Resize This</div> 
    this is some text. this is some text. this is some text. this is some 
    text. this is some text. this is some text. this is some text. this is 
    some text. this is some text. this is some text. this is some text. 
</div> 

的jquery：

var oh=0; //original height of container 
    var ow=0; //original width of container 
    var fs=10;//original font size 

    $(document).ready(function(){ 
     oh=$("#container").height(); 
     ow=$("#container").width(); 

     $("div#container").resizable({ 
      stop: function(element,ui){ 
       var h=ui.size.height; 
       if(oh==0) return; 
       var nfs = (h/oh) *fs; 
       $("#container").css({'font-size':nfs+"px"}); 
      }, 
      ghost: true 
     }); 
    });