jquery - jQueryアニメーションで前方にジャンプしますか?

Question

jQueryアニメーションを前後にジャンプする方法はありますか?

たとえば、要素のアニメーションを 10 秒に設定した場合、そのアニメーションに「5 秒」にジャンプできますか? できれば、これをパーセンテージで設定できます。

Answer 1

http://api.jquery.com/queue/

アニメーションにキューを設定してみるか、

あなたが確かに例を提供することができれば、あなたは良いヒントを受け取ることができます;）

Answer 2

現在のアニメーションを停止し、アニメーション化されたオブジェクトの状態を初期状態と最終状態の中間に設定してから、新しいアニメーションを元の最終状態に開始できますが、半分の時間に設定されます。

アニメーションの途中の位置にジャンプし、そこから続行します。

実例は次のとおりです：http：//jsfiddle.net/jfriend00/FjqKW/。

Answer 3

これには、パーセンテージ機能以外は必要なものがすべて含まれている必要があります。

デモ: http://jsfiddle.net/SO_AMK/MHV5k/

jQuery:

var time = 10000; // Animation speed in ms
var opacity = 0; // Final desired opacity


function jumpAnimate(setOpacityTo, newOpacity, speed){  // I created a function to simplify things
    $("#fade").css("opacity", setOpacityTo).animate({
        "opacity": newOpacity
    }, {
        duration: speed // I used speed instead of time because time is already a global variable
    });
}

$("#jump").click(function(){
    var goTo = $("#jump-to").val(); // Get value from the text input

    var setOpacity = (1 / time) * (time - goTo); /* The opacity that the element should be set at, i.e. the actual jump
    Math is as follows: initial opacity / the speed of the original animation in ms * the time minus the desired animation stop in ms (basically the remaining time past the desired point) */

    $("#fade").stop(); // Stop the original animation after the math is finished so that we have minimal delay

    jumpAnimate(setOpacity, opacity, time - goTo); // Start a new animation
});

jumpAnimate(1, opacity, time);​ // Start the initial animation