3

いくつかのjquery.animate関数のチェーンをスムーズにしたいと思います。

これが私が問題を説明するjsfiddleです：http： //jsfiddle.net/xavier_seignard/KTxbb/4/

ご覧のとおり、linear属性を使用している場合でも、各アニメーションの間に停止があります。

あなたはそれを滑らかにする方法について何か考えがありますか？または、トリックを行う他の何か？

よろしく

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

jQueryEasingプラグインを試してみるべきだと思います-http: //gsgd.co.uk/sandbox/jquery/easing/

ファイルを含め、「ライナー」の代わりに他のイージングを追加します。

于 2012-09-17T11:30:48.090 に答える
1

あなたが説明しているのは速度の変化ですか？

これは、アニメーションのタイミングは同じですが、四角いボックスがカバーする距離が異なるためです。移動距離に応じて、各アニメーションの時間を変更する必要がある場合があります。

于 2012-09-17T11:31:59.610 に答える
1

それがjsfiddleの問題です..jsfiddleリンクをテストしましたが、質問で述べたように見栄えがよくありませんでした。

しかし、その後、PC に新しいページを作成し、フィドルからすべてをコピーして確認しました。大丈夫そうです。

これをコピーして貼り付け、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 に答える