javascript - 关于jquery的animate动画速度匀速的问题？
本文介绍了javascript - 关于jquery的animate动画速度匀速的问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
想问下各位，jquery中的animate动画在设置了速度 和 linear匀速之后，还是会出现因为left值得不同而导致速度的不一样，如果我想让两个元素的速度一样，那我该怎么设置速度呢 ，根据left值来计算吗？ 代码示例
图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
.run{
width:150px;
height:150px;
background: #5bc0de;
position: absolute;
left:900px;
top:30px;
}
.run2{
left:1900px;
top:190px;
}
</style>
</head>
<body>
<div class="run"></div>
<div class="run run2"></div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$('.run').animate({
left:0
},20000,'linear',function(){ // 两个都是20s的速度 但是因为left的值不同 速度还是不一样
console.log(111)
})
</script>
</body>
</html>
解决方案
速度能一样才奇怪了，两个起点不同，终点相同，即位移不同，而又指定了运动时间是相等的，都为20000，你说匀速运动速度能相同吗。你要速度相同，那就给定个期望速度值，根据位移反过来计算时间咯
这篇关于javascript - 关于jquery的animate动画速度匀速的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
