Question

I do hope my question fits here, because I read the FAQ but it isn’t clear to me whether I should run code errors here. Anyway, this snippet (extracted from a project I work on) is giving me a hard time. When checking in JSFiddle it tells me that it expected } for closing the animate({ but instead found 300, but that doesn’t make sense because there is nothing to match, animate is already closed.

Console then, tells me that the comma before 300 was unexpected. I really don’t understand the problem with it!

var condition = offL > ((wW / 2) - $this.width()),
  propertiesAnim = [],
  propertiesCss = [];

if (condtion) {
  properties = "'left': offL - tooltip.width() - 25";
  propertiesCss = "'right', 'auto'";
} else {
  properties = "'right': offR - tooltip.width() - 25";
  propertiesCss = "'left', 'auto'";
}

tooltip.stop(true).css(propertiesCss).text(title).animate({
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2)),
  properties
}, 300).fadeTo(200, 1); // Error

Answer 1

You can neither add to a “property” list nor insert variables into strings like that.

Firstly, use correct object literal syntax to fill your properties (which need to be declared as objects, not arrays)

var properties = {}, css = {};

if (condtion) {
    properties = { left: offL - tooltip.width() - 25 };
    css = { right: 'auto' };
} else {
    properties = { right: offR - tooltip.width() - 25 };
    css = { left: 'auto' };
}

and then, use $.extend to add new properties to an existing object, or just add the required value directly, i.e.

$.extend(properties, {
    top: $this.offset().top + (posT / 2) - (tooltip.height() / 2)
});

or:

properties.top = $this.offset().top + (posT / 2) - (tooltip.height() / 2);

then:

...animate(properties);

$.extend() is preferred if you already have one set of object properties and want to merge the contents of another. For just adding one property the latter method is simpler.