Einfache ternäre Operation funktioniert nicht

Question

Ich versuche, eine div Änderung der Position beim Klicken und dann wieder in die ursprüngliche Position, wenn Sie erneut klicken. Ich kann nicht für das Leben von mir herausfinden, was das Problem ist.

$("#bottom").click(function() { 

    var $about = $('#bottom'), 
    top = $about.css('top') === '50%' ? '90%' : '50%'; 

$about.stop().animate({top: top}, 500); 
}); 

mein CSS ist:

#bottom { 
top: 90%; 
left: 0; right: 0; 
height: 100%; 
} 

Wenn ich auf #bottom, die div positioniert sich auf 50%, aber wenn ich es wieder treffen, passiert nichts.

Answer 1

.css('top') gibt Ihnen nicht die literale CSS top Deklaration; es gibt Ihnen die berechnete Pixelanzahl von oben. Wenn Ihr Behälter für #bottom 100px groß ist, dann gibt $('#bottom').css('top') Ihnen 90px, nicht90%.

Here's a fiddle with a solution for you.