3

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

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

如您所见，每个动画之间都有一个停止点，即使使用线性属性也是如此。

你知道如何平滑它吗？或者其他任何可以解决问题的方法？

问候

4

4 回答 4

3

您可以更改速度以获得更“精细”的动画，您会看到停止，因为它的速度太快且大小不同而无法覆盖：

function initPage() {
    $.each(json, function() {
        $("#point").animate({
            left: this.x,
            top: this.y
        },
        1000, 'linear');
    });
}​
于 2012-09-17T11:31:13.297 回答
2

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

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

于 2012-09-17T11:30:48.090 回答
1

是你描述的速度变化吗？

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

于 2012-09-17T11:31:59.610 回答
1

这就是 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>
于 2012-09-17T11:46:04.083 回答