Wie ändere ich div Position mit Javascript?

Question

So, hier ist was ich bisher habe: https://jsfiddle.net/625qofbe/1/

Was ich will, ist für die Position des „etwa“ div, mit dem Lorem Ipsum Text und was sollte ein „X“ -Symbol (ich weiß nicht, wie um Bilder in JSfiddle zu verlinken, tut mir leid), um zum Beispiel 30 Pixel nach links zu bewegen, wenn der Benutzer oben links auf die Schaltfläche "Über" klickt. Hier ist die Javascript Ich habe versucht, das zu tun, mit:

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 30px; 
} 

Ich habe googeln und die Javascript gegen erfolgreiche kleine Experimente wie diese ewig Kontrolle, aber nichts hat funktioniert und ich kann nicht sehen, was ich Ich mache hier falsch.

Das Endziel ist es, den Lorem-Text außerhalb des Bildschirms verborgen zu haben, hineinzuschieben, wenn der Benutzer auf About klickt, und dann außerhalb des Bildschirms zu gleiten, sobald er auf das X-Symbol klickt. Ich war mir sicher, dass ich theoretisch wusste, wie das geht, aber ich habe im ersten Schritt einen Haken gefunden.

EDIT: Danke für die Hilfe Jungs, aber seltsamerweise die beiden Lösungen, die beide in JSfiddle funktionierte, funktionierte nicht, auch wenn ich den Code wieder in Sublime Text kopiert/eingefügt. Ich habe jedoch die Sache funktioniert, indem ich die Zeile "addEventListener" entfernt habe und "onclick = 'AboutOnScreen()'" in das div-Tag für die Über-Schaltfläche eingefügt habe. Die Zeile "addEventListener" hat eine Fehlerbenachrichtigung gesendet, als ich die Seitenquelle überprüft habe (wie von Arindam vorgeschlagen), sodass ich sie vollständig losgeworden bin. Das Seltsame ist, ich bin mir sicher, dass ich das vorher ohne Erfolg versucht habe, also stellte sich heraus, dass die Lösung dieses Kopfkratzers ein Zusammenfluss aller Antworten ist.

Answer 1

Wie @Rikard erwähnt, gehen Sie wie folgt vor:

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = '30px'; 
} 

Welche das Snippet bekommen sollte arbeiten. Wie bei der gleitenden Animation können Sie CSS3 (unter der Annahme von Browserunterstützung) verwenden, um schnell Animationen für Ihre Seite hinzuzufügen.

wäre eine gute Ressource für CSS3-Animationen http://www.w3schools.com/css/css3_animations.asp

Viel Glück und viel Spaß!

Answer 2

Wenn Sie den Inline-Stil des Abstandswertes eines Elements in plain JS festlegen, ist dies eine Kombination aus Number und String oder String. Der Wert kann also lauten: '430px' oder 430+'px'.

document.getElementById("button").addEventListener("click", AboutOnScreen); 

function AboutOnScreen() { 
    document.getElementById("about").style.left = 430 + 'px'; 
} 

sagte Sie bewegen nach links um 30px, die (zumindest für mich) interpretiert wird, wie 30px von dem Element zur Zeit positioniert ist. So war es left: 400px, also sollte der Wert 430px sein, wenn man 30px nach links verschiebt.

FIDDLE