统一发布！！！代码加解释！！！还不懂的留下问题。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画特效</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<!--设置div元素居中 -->
<style>
body{ text-align:center}
.box{ margin:0 auto; width:400px; height:100px; border:8px solid grey}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<h5>JQuery7-13编程练习</h5>
<!-- 1、创建一个div元素 -->
<div class="box"
style="color:red;background:yellow;height:100px;width:100px;position:relative;">
</div>
<!-- 2、页面中创建两个按钮 -->
<input id="btnLeft" type="button" value="左移" />
<input id="btnRight" type="button" value="右移" />
<!-- 3、实现左移和右移。 -->
<script type="text/javascript">
//A实现左移。
$(function(){
var $timeL=0;
var $timeR=0;
$("#btnLeft").bind("click",function(){
$timeL++;
$("div").animate({
left: "-=50px"
},500,function(){
$("div").html("左移"+$timeL+"次")
})
});
//B实现右移。
$("#btnRight").bind("click",function(){$("div").animate({
left: "+=50"
},500,function(){
$timeR++;
$(this).html("右移"+$timeR+"次")
})
})
});
</script>
</body>
</html>
