求大神指教，我的太阳动不了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" http-equiv="content-type" content="text/html">
<title>七夕主题课</title>
<link type="text/css" rel="stylesheet" href="css/qixi.css">
<link type="text/css" rel="stylesheet" href="css/pageA.css">
<style type="text/css">
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
/*---太阳自转以及动画---*/
#sun{
background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
position: absolute;
z-index: 1;
top:-30px;
height:201px;
width:201px;
right:40%;
}
.rotation {
-webkit-animation-name: rotation;
-webkit-animation-duration: 30s;
-moz-animation-name: rotation;
-moz-animation-duration: 30s;
}
@-webkit-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
}
@-moz-keyframes rotation {
100% {
transform: translateX(-2000px) translateY(400px);
}
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<script type="text/javascript" src="js/Swipe.js"></script>
<script type="text/javascript" src="js/BoyWalk.js"></script>
</head>
<body>
<div id='content'>
<ul class="content-wrap">
<!--第一幅画-->
<li>
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_bottom"></div>
</div>
<!--太阳-->
<div id="sun"></div>
</li>
<!--第二幅画-->
<li>页面2</li>
<!--第三幅画-->
<li>页面3</li>
</ul>
<div id="boy" class="charector"></div>
</div>
<div class="button">
<button>开始</button>
</div>
</body>
<script type="text/javascript">
$(function(){
var container = $('#content');
var swipe = Swipe(container);
//页面翻滚到指定的位置
function scrollTo( time,proportionX){
var distX = container.width()* proportionX;
swipe.scrollTo(distX,time);
}
///////////////
//== 动画处理==//
//////////////
var boy = BoyWalk();
//开始
$("button:first").click(function(){
//太阳公转
$("#sun").addClass('rotation');
boy.walkTo(2000,0.2)
.then(function(){
//第一次走路完成
//页面开始滚动
scrollTo(5000,1);
}).then(function(){
//第二次走路
return boy.walkTo(5000,0.5);
});
});
})
</script>
</html>
