您的位置：首页 > 其它

不同物体分步运动

2013-12-17 10:44 120 查看

刚才在仿照迅雷无线的首页做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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航