Multiple css rules with ternary operator

Question

Within a .hover() event, I have the following code:

$(this).css('background-position', circle.includesXY(e.pageX, e.pageY) ? 'bottom' : '');

Could somebody explain how I can add more property:value pairs to .css() without compromising the ternary operator? If not, how should it be rewritten?

Answer 1

.css also accepts an object:

$(this).css(circle.includesXY(e.pageX, e.pageY)
   ? {
      property1: 'value1',
      property2: 'value2'
   }
   : {
      property1: 'value3',
      property2: 'value4'
   }
);