不同物体分步运动

刚才在仿照迅雷无线的首页做banner的过程中，碰到的这个问题。两个物体分步运动，其中B在A运动结束之后才能继续进行。。。主要的运用了JQ里面的animaet的回调函数。

例子：

　

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
}
body{
    padding: 10px;
}
#div1{
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
    left: 50px;
    top: 50px;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    left: 400px;
    top: 50px;
    opacity: 0;
    filter: alpha(opacity=0);
}
</style>
<script src="jQuery.js"></script>
<script>
$(function(){
    // alert(1);
    var oBtn = $('#btn');
    var oDiv1 = $('#div1');
    var oDiv2 = $('#div2');

    oBtn.toggle(function(){
        // alert(1);
        oDiv1.stop().animate({'left':400+'px','opacity':0},600,function(){
            oDiv2.stop().animate({'left':50+'px','opacity':1},1200);
        });

    },function(){
        oDiv2.stop().animate({'left':400+'px','opacity':0},600,function(){
            oDiv1.stop().animate({'left':50+'px','opacity':1},1200);
        });
    });
});
</script>
</head>
<body>
    <input type="button" value="开始运动" id="btn" />
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

 

posted @ 2013-12-17 10:44  白小虫  阅读(252)  评论(0)  编辑  收藏  举报