如何用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
         });
    });