$(this).animate({ top: 200 }, 500); TOP soll eine Variable sein?

Question

Es fällt mir schwer, das zu erklären, also werde ich einfach zeigen, was ich zu tun versuche:

Das funktioniert gut:

$(this).animate({ top: 200 }, 500);

Ich versuche, den Wert "top" durch eine Variable zu ersetzen

wie diese:

var x = 'top';    
if (condition) { x = 'left'; }    
$(this).animate({ x: 200 }, 500);

Aber das ist misslungen.

Answer 1

Sie übergeben ein Objekt - definieren Sie es vorher wie folgt. Dabei kann x alles Mögliche sein, z.B. 'top', 'left', etc.

obj[x] = 200;

$(this).animate(obj, 500);

Answer 2

Sie können dies versuchen.

var pos = {'top':200};    
if (condition) { pos = {'left':200}; }    
$(this).animate(pos, 500);

Answer 3

Oben ist ein Parameter . Sie können beliebige CSS-Eigenschaften übergeben.

Eine Karte mit CSS-Eigenschaften, auf die sich die Animation zubewegen wird.

Answer 4

Ich bin ein bisschen spät zu der Partei, aber Sie könnten dies verwenden, um Objektschlüssel zu berechnen, wenn Sie ES6 verwenden:

x = 'top';    
if (condition) { x = 'left'; }    
$(this).animate({ [x]: 200 }, 500);

Referenz: MDN