本文实例讲述了jquery循环动画与获取组件尺寸的方法。分享给大家供大家参考。具体分析如下：
一、前言
1、jquery中的animate()方法允许您创建自定义的动画。
animate() 方法几乎可以操作所有 css 属性，不过当使用 animate() 时，必须使用camel标记法书写所有的属性名，比如，必须使用paddingleft而不是padding-left，使用marginright而不是margin-right，等等。同时，色彩动画并不包含在核心 jquery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 color animations 插件。
2、通过jquery，很容易处理元素和浏览器窗口的尺寸。
jquery提供如下属性获取元素和浏览器窗口的尺寸。
二、基本目标
如下图：
在网页中创建两个按钮，一个按钮能够使组件的尺寸在显示与隐藏状态中切换，一个按钮能够使循环动画在开始与停止状态中切换
单纯的jq没有暂停与开始动画播放的功能，必须下载jquery pause插件完成。本例而仅仅通过javascript去控制循环动画，所以每次暂停仅能在其完成一次循环体才能够打断，并不能做到在随意位置暂停开始的功能。
三、制作过程
以下是网页所有代码，之后再一部分一部分地解释：
复制代码 代码如下:
jq动画
显示/隐藏方块尺寸
开始/停止动画的循环
style=width: 100px; height: 100px; background-color: #000; position: absolute; top: 50px; color: #fff; left:50px;>
1、部分
没有什么特别的，就是定义两个按钮在与一个图层。值得注意的是，在图层的style参数值中必须加入position:absolute一项，否则此图层无法在网页中随意移动
background-color是图层的背景颜色。color是图层中的字体颜色。
需要定义id与class两个参数，因为jq动画需要通过class来控制，而jq获取组件尺寸则需要通过id来控制。
同时，摆放图层的位置需要注意，是用left与top来放置，而不是margin-left与margin-top去放置，因为jq动画控制代码是用left与top去控制的。如果使用margin-left与margin-top去放置在动画开始的瞬间会有小幅度的失真。
2、部分
也就是核心代码部分：
复制代码 代码如下:
jq动画
希望本文所述对大家的jquery程序设计有所帮助。