Verwenden von JQuery .animate(), um bei einem Wert zu beginnen und bei einem anderen Wert zu enden

Question

Ist es möglich, jquery's .animate() -Methode zu verwenden, um Eigenschaften von einem (explizit gesetzten) Anfangswert auf einen endgültigen Wert zu animieren, oder muss es immer sein vom aktuellen Wert zu einem anderen Wert?

Answer 1

Soweit ich weiß, muss es aktuellen Wert bis zum endgültigen Wert sein. Aber sagen wir mal, Sie möchten die Höhe von 20 auf 100px animieren; Just do:

$('#elem').css('height', '20px').animate({ height: 100 }, 1000); 

Answer 2

Legen Sie einfach den Wert der Eigenschaft vor dem Aufruf von animate().

Answer 3

.animate() wird immer vom aktuell festgelegten Wert der Eigenschaft, die Sie animieren, auf den endgültigen Wert umgestellt, den Sie mit der Methode angeben. Wenn Sie von Opazität 0.75 zu 0.25 wechseln möchten und Ihr aktueller Wert 0.5 wäre, müssten Sie .css('opacity',0.75).animate({opacity: 0.25})

Answer 4

Sie können Startwert einfach angeben, indem Sie es als Pseudo-Selektor festlegen.

Betrachten wir, dass Sie etwas Wert animieren müssen, dass Ihr Code wird nicht eine CSS-Eigenschaft von -100 bis 100. In diesem Fall ist:

$({xyz: -100}).animate({xyz:100}, {duration:5000, complete:function(){ 
    console.log("done"); 
}, step: function(now) { 
    //here you want to place your processing code for every frame of animation. 
    console.log("Anim now: "+now); 
}}); 

Sie sehen können, zB bei JSFiddle here arbeiten.