web-dev-qa-db-ja.com

jQueryアニメーションの速度？

最終編集：以下のテキストの壁は、「jQueryのanimate()を使用してアニメーションの速度を指定できますか？」 ？提供されるのはdurationのみです。」

~~

jQueryのanimate()は、「linear」を使用しているにもかかわらず、イージングを実装しているようです。最初のボックスが250pxで終了するまで2つのボックスを一緒にしておくにはどうすればよいですか？ 2番目のアニメーションは、移動する距離が長いため、アニメーションがはるかに速くなります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#a').animate({left: '250px'}, 1000, 'linear');
        $('#b').animate({left: '500px'}, 1000, 'linear');
    });
</script>

<div id="a" style="background-color: red; position: relative; width: 50px; height: 50px;"></div>
<br/><br/>
<div id="b" style="background-color: red; position: relative;width: 50px; height: 50px;"></div>

または これを行うjQueryカルーセルプラグインはありますか （マウスを置いている場所に基づくマウスの動き）なので、書き換える必要はありませんか？ Googleで20分ほど探してみましたが、好きなものが思いつきませんでした。

[〜＃〜] eta [〜＃〜]：私が提供した例は非常に単純ですが、私が見つけた問題はより多くに適用されます複雑なコードベース。 （1） ここに移動します。 （2）マウスをC. Viperに置き、速度を確認します。 （3）Ryuにマウスを置きますが、完了する前に、マウスをDIVの中央に移動します（停止します）。 （4）マウスを左側に戻し、マウスの動きが非常に遅いか確認します。

速度と距離の違いを計算することは、ここでは乗り越えられないようです。私がやろうとしているのは、今日サイトが使用した素敵な効果を再現することだけです（ このサイト ）。しかし、それはMootoolsであり、私はjQueryにいます。 = [

jqueryjquery-animate
17
Langdon

更新された質問の場合：
最初に、ここにあなたが望む振る舞いをする実際のデモがあります 。ここでは、移動に必要な量に基づいて速度を調整しています。speedは正確な説明ではないため、durationであり、同じ距離でより短い距離を移動します持続時間は移動が遅いことを意味するため、移動する必要がある距離に応じて持続時間をスケーリングする必要があります。後方に移動すると、次のようになります。

var oldLeft = ul.offset().left;
ul.animate({left: 0}, -oldLeft * speed, 'linear');

<ul>は負の左位置でスクロールするため、最初に戻るにはその数のピクセルの逆数を移動する必要があるため、-oldLeftを使用しています（それはcurrentです） = left position）。

順方向については、非常によく似たアプローチ：

var newLeft = divWidth - ulWidth,
    oldLeft = ul.offset().left;
ul.animate({left: newLeft + 'px'}, (-newLeft + oldLeft) * speed, 'linear');

これは、新しいleftプロパティを取得します。最後は、<ul>の幅から<div>の幅を引いたものです。次に、現在の値からそれを減算します（負なので追加します）。 left位置（これも負なので逆転）。

このアプローチにより、speed変数にまったく新しい意味が与えられます。これは、以前のdurationではなく"ミリ秒/ピクセル"を意味します。あなたが求めているもの。もう1つの最適化は、すでにキャッシュされている<ul>セレクターを使用することで、全体的に少し高速/クリーンになります。

元の質問の場合：
次のように、距離を半分にして半分の時間でシンプルにしてください：

$(function() {
    $('#a').animate({left: '250px'}, 500, 'linear');
    $('#b').animate({left: '500px'}, 1000, 'linear');
});

ここでデモを試すことができます

23
Nick Craver

私はあなたが望むものを正確に行うプラグインを作りました。 Supremation を使用して、継続時間ではなくアニメーションの速度を指定できます。

9
lukeshumard

linearは、アニメーションが線形増分で実行され、終了時に加速または減速しないことを指定するだけです。 2つのアニメーションを同じ速度にしたい場合は、距離の2倍のアニメーションにかかる時間を2倍にします。

$('#a').animate({left: '250px'}, 1000, 'linear');
$('#b').animate({left: '500px'}, 2000, 'linear');
2
Mike Sherov

このようなもの？？

デモ

$('#a,#b').animate({left: '250px'}, 1000, 'linear',
    function(){
       $('#b').animate({left: '500px'}, 1000, 'linear');   
    }
);
0
Reigel