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去控制循环动画，所以每次暂停仅能在其完成一次循环体才能够打断，并不能做到在随意位置暂停开始的功能。
三、制作过程
以下是网页所有代码，之后再一部分一部分地解释：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ动画</title>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.js"></script>
<script>
var interval;
var i = 0;
var j = 0;
function divanimate() {
$(".d_class").animate( {left : "+=100px"}, 500);
$(".d_class").animate( {top : "+=100px" }, 500);
$(".d_class").animate( {left : "-=100px"}, 500);
$(".d_class").animate( {top : "-=100px" }, 500);
}
function cycle() {
divanimate();
interval = setInterval("divanimate()", 2000);
}
$(document).ready(function() {
$("#stop").click(function() {
i++;
if (i % 2 != 0)
cycle();
else
clearInterval(interval);
});
$("#show").click(function() {
j++;
if (j % 2 != 0) {
var txt = "";
txt += "<p align=\"center\">高: " + $("#d_id").height() + "px</br>";
txt += "宽: " + $("#d_id").width() + "px</p>";
$("#d_id").html(txt);
} else {
var txt = "";
$("#d_id").html(txt);
}
});
})
</script>
</head>
<body>
<button>
显示/隐藏方块尺寸
</button>
<button>
开始/停止动画的循环
</button>
<div
></div>
</body>
</html>