Question

我想平滑一些jquery.animate函数的链接。

这是我描述问题的jsfiddle： http://jsfiddle.net/xavier_seignard/KTxbb/4/

正如您所看到的，即使使用线性属性，每个动画之间也会有一个停止。

你对如何平滑它有什么想法吗？或其他任何可以解决问题的方法？

此致

Answer 1

你可以改变一个更“精细”的动画的速度，你会看到停止，因为它的速度太快而且尺寸不同：

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}

Answer 2

我认为你应该试试jQuery Easing插件 - http://gsgd.co.uk/sandbox/jquery/easing/

包含文件，而不是“衬垫”添加其他一些缓和。

Answer 3

您所描述的是速度的变化吗？

这是因为动画具有相同的时序，但方框所覆盖的距离不同。您可能需要根据行进的距离更改每个动画的时间。

Answer 4

这就是jsfiddle的问题.. 我测试了你的jsfiddle链接，你在问题中提到它看起来不太好。

然后我在我的电脑上创建了新页面并复制了你的小提琴中的所有内容并进行了检查。它看起来还不错。

复制并粘贴此内容并将其另存为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>

如何平滑jquery动画

4 个答案: