需要定义id与class两个参数，因为JQ动画需要通过class来控制，而JQ获取组件尺寸则需要通过id来控制。
同时，摆放图层的位置需要注意，是用left与top来放置，而不是margin-left与margin-top去放置，因为JQ动画控制代码是用left与top去控制的。如果使用margin-left与margin-top去放置在动画开始的瞬间会有小幅度的失真。
2、<head>部分
也就是核心代码部分：
<head>
<!–网页编码，标题，使用JQ–>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JQ动画</title>
<script type=”text/javascript” src=”js/jquery-1.11.1.js”></script>
<script>
/*这相当于记录循环状态的指针，为下面清理clearInterval()所用*/
var interval;
/*i是用来记录点击“开始/停止动画的循环”按钮的次数，如果此按钮点击奇数次就开始循环，偶数次就终止循环*/
var i = 0;
/*j是用来记录点击“显示/隐藏方块尺寸”按钮的次数，如果此按钮点击奇数次就显示尺寸，偶数次就隐藏尺寸*/
var j = 0;
/*由于没有封装好的toggle()方法，我们需要这么做*/
function divanimate() {
/*这里只能通过图层的class值来控制图层，获取class值的前面的符号是.，而不是#*/
<!–要求class为d_class的图层，先向右偏移100px，再向下偏移100px，之后向左偏移100px，最后向上偏移100px回到原位，每个动作500毫秒以内完成，也就是0.5秒–>
<!–这里注意的是left的意义是x轴的正方向，屏幕最左为0px，越往右数值越大，top是y轴的负方向，屏幕最上为0px，越往下数值越大–>
$(“.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()函数，之后，每2000毫秒，也就是每2秒执行divanimate()一次。这个间隔刚好是一次动画所完成时间，如果不打断此循环的话，刚好能够无间隔地无缝完美执行循环动画。*/
