上述代码用两个css()函数链接在DIV元素对象后面实现了对尺寸大小的修改。这种函数链可以是同一种函数，也可以是多个不同的函数。例如：
- 1 <script type="text/javascript">
- 2 $(function(){
- 3 $("#update").click(function(){
- 4 var width=$("#divwidth").val();
- 5 var height=$("#divheight").val();
- 6 $("#div1").css("width",width+"px").height(height);
- //利用CSS样式设定函数与高度设定函数链接使用方式设定元素的高度和宽度
- 7 });
- 8 });
- 9 </script>
jQuery的函数链功能使其功能更强大，代码更简洁。
jQuery除了可以使用样式设定方法及尺寸方法动态修改DIV的大小外，还可以使用自定义动画来实现DIV的大小变化。在自定义动画中可以将DIV要修改的大小尺寸传递给函数，由函数以动画的形式完成变化，而且可以设定一次动画操作完成所有变化，也可以分多次完成。
3．jQuery函数animate()--自定义动画
该函数用于创建自定义动画。其语法形式如下：
- animate(params,[duration],[easing],[callback])
- animate(params,options)
注：这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如"height"、"top"或"opacity"）。params，一组包含动画属性和终值的样式属性及其值的集合；duration，三种预定速度之一的字符串（"slow"、"normal"或"fast"）或表示动画时长的毫秒数值（如1000）；easing，要使用的擦除效果的名称（需要插件支持），jQuery默认提供"linear"和"swing"；callback，在动画完成时执行的函数；options，一组包含动画选项的值的集合。
下面这段代码可以完成一次动画将DIV的大小变化完成：
- 1 <script type="text/javascript">
- 2 $(function(){
- 3 $("#update").click(function(){
- 4 var width=$("#divwidth").val();
- 5 var height=$("#divheight").val();
- 6 $("#div1").animate({width:width+"px",height:height+"px"},4000);
- //利用自定义动画函数动态显示元素宽度和高度的更改
- 7 });
- 8 });
- 9 </script>
具体完成效果和前面的相同。也可分两次完成动画：
- 1 <script type="text/javascript">
- 2 $(function(){
- 3 $("#update").click(function(){
- 4 var width=$("#divwidth").val();
- 5 var height=$("#divheight").val();
- 6 $("#div1").animate({width:width+"px"},4000).animate({height:
- height+"px"},4000);
- 7 });
- 8 });
- 9 </script>
上述代码的效果是DIV先横向变化，到达设定值后再纵向变化。
