javascript - Hur snabbar du upp en animation mitt i animationen med jQuery?

Anta att du har en animation som körs med en viss tid på det här sättet:

$('span').animate({opacity : 1}, 10000);

Animeringen är ganska lång så användaren försöker klicka på knappen igen. Animeringen kommer att ha pågått en viss tid genom animeringen redan, vilket troligen kommer att vara olika varje gång.

Vid det andra klicket är det möjligt att uppdatera animationsprocessen och behålla objektets opacitet när användaren klickar, bara genom att ändra tiden det tar att slutföra?

Grundläggande vill jag uppdatera animationsprocessen mitt i animationen.

Svar #1

Du kan använda step-alternativet i animate för att hålla reda på hur långt animeringen har kommit. Sedan kan du med den informationen beräkna återstående tid i animeringen. Därefter stoppar du den aktuella animeringen och startar en ny med halva varaktigheten.

http://jsfiddle.net/MdD45/

REDIGERA

Det ser ut som att den andra parametern som skickas till step innehåller en egenskap som heter pos som berättar vilken procentandel av animationen du befinner dig i. Det kan förenkla saker ytterligare.

http://jsfiddle.net/MdD45/1/

var startVal = 0;
var endVal = 1;
var duration = 10000;

var howfar = 0;

$('span').css("opacity",startVal)
    .animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });

$("button").click(function(){
    // calculate the new duration as half of the remaining duration
    var timeRemaining = duration - (howfar * duration);
    duration = timeRemaining / 2;

    $('span').stop().animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });
});

Svar #2

Jag satte ihop något igår för att hoppa över jQuery-animationer, här är koden, det borde vara ganska lätt att modifiera för ditt användningsfall:

REDIGERA: Modifierad version:

Demo: http://jsfiddle.net/SO_AMK/fJyKM/

jQuery :

var time = 10000;
var opacity = 1;
var currentTime = 0;

$("#square").animate({
    opacity: opacity
}, {
    duration: time,
    step: function(now, fx) {

        currentTime = Math.round((now * time) / opacity);

    },
    easing: "linear"
});


$("#hurry").click(function() {
    $("#square").stop().animate({
        opacity: opacity
    }, {
        duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
        step: function(now, fx) {

            currentTime = Math.round((now * time) / opacity);

        },
        easing: "linear"
    });
});

Det fungerar också för andra egenskaper, som bredd. Det enda problemet är att om det är ett minskande värde behöver du använda ett annat skript.