jquery .css() won't set multiple properties programmatically

jquery .css() won't set multiple properties programmatically

This works:
var property1 = "width";
$('.button1').on("click", function(){
$('.greenbox').css(property1, "200px");
});
But this doesn't:
var property1 = "width";
var property2 = "border-top";
$('.button2').on("click", function(){
$('.greenbox').css({
property1: "50px",
property2: "50px"
});
});
Why? And what's the easiest, fastest, slickest. most cross-browserest way
to set an unknown quantity of multiple (unknown) properties? I know the
values, I just don't know the properties. :)
http://jsfiddle.net/4KwXa/