Javascript 如何平滑jquery动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12458237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to smooth jquery animations
提问by xavier.seignard
I would like to smooth the chaining of some jquery.animate functions.
我想平滑一些 jquery.animate 函数的链接。
Here is a jsfiddle where I describe the problem : http://jsfiddle.net/xavier_seignard/KTxbb/4/
这是我描述问题的 jsfiddle：http: //jsfiddle.net/xavier_seignard/KTxbb/4/
As you can see, there is a stop between each animation, even with the linear attribute.
如您所见，即使使用线性属性，每个动画之间也有一个停顿。
Do you have any idea about how to smooth it? Or anything else that would do the trick?
你知道如何平滑它吗？或者其他任何可以解决问题的方法？
Regards
问候
采纳答案by Mihai Iorga
You can change the speed for a more "fine" animation, you see that stop because the speed it's too fast and different size to cover:
您可以更改速度以获得更“精细”的动画，您会看到停止是因为速度太快且大小不同而无法覆盖：
function initPage() {
$.each(json, function() {
$("#point").animate({
left: this.x,
top: this.y
},
1000, 'linear');
});
}?
回答by Lazar Vuckovic
I think you should just try out the jQuery Easing plugin - http://gsgd.co.uk/sandbox/jquery/easing/
我认为你应该试试 jQuery Easing 插件 - http://gsgd.co.uk/sandbox/jquery/easing/
Include the file and instead of "liner" add some other easing.
包含文件，而不是“liner”添加一些其他缓动。
回答by Tom
Is it the change in speed that you're describing?
是您描述的速度变化吗？
That is because the animations have the same timings but the distance the square box is covering differs. You might need to alter the time for each animation dependant in the distance travelled.
那是因为动画具有相同的时间，但方块覆盖的距离不同。您可能需要根据行进的距离更改每个动画的时间。
回答by Kuldeep Daftary
Thats the problem with jsfiddle.. I tested your jsfiddle link and it was not looking great as you mentioned in your question.
这就是 jsfiddle 的问题。我测试了你的 jsfiddle 链接，它看起来并不像你在问题中提到的那样好。
But then I created new page on my pc and copied everything from your fiddle and checked it. It looks alright.
但后来我在我的电脑上创建了新页面，并从你的小提琴中复制了所有内容并进行了检查。看起来没问题。
Copy and paste this and save it as html and test it :
复制并粘贴它并将其另存为 html 并进行测试：
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<style type="text/css">
#point {
position: absolute;
background-color: black;
width: 15px;
height: 15px
}
</style>
</head>
<body onload="initPage()">
<div class="start" id="point"></div>
<script type="text/javascript">
var json = [
{'x' : '300' , 'y' : '200'},
{'x' : '250' , 'y' : '150'},
{'x' : '209' , 'y' : '387'},
{'x' : '217' , 'y' : '323'},
{'x' : '261' , 'y' : '278'},
{'x' : '329' , 'y' : '269'},
{'x' : '406' , 'y' : '295'}
];
function initPage() {
$.each(json, function() {
$("#point").animate({
left: this.x,
top: this.y
},
"linear");
});
}
</script>
</body>
</html>
