如何平滑地执行jQuery动画

Question

如何平滑地执行jQuery动画

javascriptjqueryjquery-animate

3

我希望能够平滑地链接一些jquery.animate函数。

这里有一个jsfiddle，我描述了问题: http://jsfiddle.net/xavier_seignard/KTxbb/4/ 正如你所看到的，即使使用了线性属性，在每个动画之间还是有停顿。

您有任何想法如何平滑处理它吗？或者其他任何可以解决问题的方法？

谢谢。

- xavier.seignard

1

还有其他人看到那个小提琴的渲染问题吗？在MacOS X上使用Chrome 21.0.1180.89，我看到留下的条纹。我在自己的代码中也看到了类似的问题，但一直没有能够将其隔离到可报告的测试用例中。 - Alnitak

@Alnitak 这是你的显卡。 - Mihai Iorga

@MihaiIorga 在我的应用程序中，这种情况只发生在Chrome 18左右，但我无法将其隔离。其他Mac上的其他卡片也会出现这种情况。 - Alnitak

@Alnitak，我也遇到了同样的问题（chrome 21/MacOs X）。 - Fabrizio Calderan

@Alnitak 在Windows 7上最新版本的Chrome也有相同的问题。 - Lazar Vuckovic

显示剩余3条评论

4个回答

2

我认为你应该尝试一下jQuery缓动插件- http://gsgd.co.uk/sandbox/jquery/easing/。将文件包含进来后，可以选择其他缓动效果替代 "liner"。

- Lazar Vuckovic

1

这就是jsfiddle的问题所在... 我测试了你的jsfiddle链接，它并不像你在问题中提到的那样好看。

但是我在我的电脑上创建了一个新页面，复制了你的fiddle中的所有内容并进行了检查。它看起来还不错。

复制并粘贴以下内容，将其保存为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>

- Kuldeep Daftary

在Windows 7 / Chrome 21上测试 - 运行良好。之前在fiddle中存在的问题现在已经消失了。 - Lazar Vuckovic

1

您描述的是速度变化吗？

这是因为动画具有相同的时间，但正方形框覆盖的距离不同。您可能需要根据行驶距离调整每个动画的时间。

- Tom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mihai Iorga · Accepted Answer

您可以更改速度以获得更“精细”的动画效果，您会发现停止是因为速度太快且不同大小无法覆盖：

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