在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