js用jquery的animate函数，如何实现在执行动画过程中，判断动画的过渡状态位置，并执行操作。
比如我有个div，坐标是(0,0)，我把他用动画过渡到某一点，比如过渡到（500，500）。在这个路径上有许多障碍物，现在做一个判断，如果他经过障碍物久打印一下，怎么做啊...
比如我有个div，坐标是(0,0)，我把他用动画过渡到某一点，比如过渡到（500，500）。在这个路径上有许多障碍物，现在做一个判断，如果他经过障碍物久打印一下，怎么做啊。。
如果把判断写在动画后面，那就只判断div的终态是否满足条件了。求助啊。。 展开
如果把判断写在动画后面，那就只判断div的终态是否满足条件了。求助啊。。 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
.a{width:50px; height:50px; background:#000; position:absolute; left:0; top:0}
.obstacle{width:50px; height:50px; background:#f00; position:absolute; top:0}
</style>
</head>
<body>
<div class="a"></div>
<div class="obstacle" style="left:70px"></div>
<div class="obstacle" style="left:150px"></div>
<div class="obstacle" style="left:220px"></div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var obstacle = [];
var count = 0;
$('.obstacle').each(function(i,o) {
obstacle.push(o);
});
$('.a').animate({
left:300
}, {
duration: 500,
step: function() {
var that = this;
obstacle.forEach(function(o,i) {
if(parseInt(that.style.left) >= parseInt(o.style.left)) {
console.log('经过障碍'+count++);
obstacle.shift();
}
});
}
});
</script>
</body>
</html>
复制到html文件运行。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
