本文通过一个例子展示了jQuery如何实现基本的动画效果。分享给大家参考，如下：

animate()方法用于创建自定义动画

语法：

$(选择器)。动画({params}、速度、回调)；参数：必须定义形成动画的CSS属性。speed:可以选择指定效果的时间：慢速、快速或毫秒回调：动画完成后要执行的函数的名称。

jQuery animate()——操作多个属性

默认情况下，所有HTML元素的位置都是静态的，不能移动。如果需要操作位置，记得先将元素的CSS位置属性设置为相对、固定或绝对。

！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('button '))。单击(function(){$('div ')。动画({left:'250px '，height:'150px '，width : ' 150 px ' })；});});/script/header dybutton start animation/button br/br/div style=' background : # 98bf 21；高度：100 px；宽度width:100pxposition:absolute'/div/body/htmlrunning结果：

绝对是指绝对定位，即将一个对象拖出文档流，使用左、右、上、下等属性进行绝对定位，而其级联是由z-index属性定义的。此时，对象没有边距，但仍有填充和边框。

当Position属性的值为绝对时，从文档流中提取对象，用后面的对象替换原来占用的位置。

“顶部”值表示对象的顶部边框与浏览器窗口顶部之间的距离，“底部”值表示对象的底部边框与浏览器窗口底部之间的距离。当两者同时存在时，只有顶级作品；如果两者都没有指定，它的顶部将处于与原始文档流相同的位置，也就是说，该位置将保持垂直不变。

左值表示对象左边框与浏览器窗口左侧之间的距离，右值表示对象右边框与浏览器窗口右侧之间的距离。当两者同时存在时，只剩下作品。如果两者都没有指定，其左侧将与原始文档流位置一致，即该位置将保持水平不变。

径向是指相对定位，即按照左、右、上、下等属性在正常文档中的偏移位置。

当“位置”属性的值为“相对”时，对象占据的原始位置将被保留，其后面的对象将根据原始文档流保留在原始位置。

“顶部”值表示对象相对于原始位置的向下偏移距离，“底部”值表示对象相对于原始位置的向上偏移距离。当两者同时存在时，只有Top起作用；

左边的值表示从原始位置到右边的距离，右边的值表示从原始位置到左边的距离。当两者都存在时，只剩下作品。

jQuery animate()——使用预定义的值

可以将属性的动画值设置为“显示”、“隐藏”或“切换”

$(“按钮”)。单击(function(){$('div ')。动画({ height : ' toggle ' })；});

jQuery animate()——使用队列功能

jquery为动画提供队列功能。

这意味着，如果您一个接一个地编写多个animate()调用，jQuery会创建一个包含这些方法调用的“内部”队列。然后逐个运行这些动画调用。

！DOCTYPE html htmlheadscript src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(文档)。ready(function(){$('button '))。click(function(){ var div=$(' div ')；div.animate({height:'300px '，opacity: ' 0.4 ' }，' slow ')；div.animate({width:'300px '，opacity: ' 0.8 ' }，' slow ')；div.animate({height:'100px '，opacity: ' 0.4 ' }，' slow ')；div.animate({width:'100px '，opacity: ' 0.8 ' }，' slow ')；});});/script/header dybutton start/button div style=' background : # 98bf 21；高度：100 px；宽度width:100pxposition:absolute'/div/body/htmlrunning结果：

将div元素向右移动，增加文本的字体大小。

！DOCTYPE html html head script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本$(文档)。ready(function(){ $(“button”)).click(function(){ var div=$(' div ')；div.animate({left:'100px'}，' slow ')；div。动画({ font size : ' 3 em ' }，' slow ')；});});/script/head dybutton开始/button div style=' background : # 98bf 21；高度：100 px宽度宽度：200像素绝对位置：’田/div/body/html运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于框架相关内容还可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。