Animieren der Breite eines Div mit Prozentsätzen in Jquery

Question

Ich versuche, die Breite eines Div in Prozent zu ändern, wenn auf eine Schaltfläche (in diesem Fall ein anderes Div) geklickt wird. Ich habe es funktioniert in diesem example, aber kann es nicht erfolgreich in den tatsächlichen Code für meine Website, ein Beispiel für die here ist. Sie sind beide identisch mit meinen Augen, aber anscheinend läuft etwas schief.

Die Javascript verwendet wird, ist:

$('#button').click(function() { 
if(!collapsed){ 
    $('.left').animate({width: '10%'}); 
} else { 
    $('.left').animate({width: '50%'}); 
} 
collapsed = !collapsed; }); 

Doch zumindest im zweiten Beispiel nichts Ergebnisse davon.

Answer 1

Zwei Probleme mit Ihrer Version:

1. die jsFiddle hat jQuery nicht enthalten.
2. Sie haben die Variable collapsed nicht definiert, sodass Sie einen Fehler in der Konsole erhalten haben.

Fix diese Probleme und es funktioniert. Beachten Sie auch, dass Sie die Breite ein Einzeiler ändern machen einen ternären Ausdruck verwenden:

var collapsed = false; 
$('#button').click(function() { 
    $('.left').animate({ width: collapsed ? '50%' : '10%' }); 
    collapsed = !collapsed; 
}); 

Working example

Es ist auch wert sein können stop(true) hinzufügen, bevor animate() Aufruf aufeinanderfolgenden Klicks zu verhindern, dass die Animation Warteschlange füllt.