How to code style jQuery with multiple key/pair object arguments

What is the correct way to indent the following call on multiple lines to make it more readable?

$("#plus.tooltip").animate({'width': '100px'开发者_如何学编程, 'height': '200px'}, {'duration': 300});

I recommend this:

$("#plus.tooltip")
  .animate({
    'width': '100px', 
    'height': '200px'
  },{
    'duration': 300
  })
  .stop()    //Added by example
  .click(function(){  //Added by example
      alert("Hi!");
  })
; //This is very important to me

As you see, we start a new indented line on each call to a jquery method, (.animate(), .stop(), .click()). Also, we start a new indented line when right after we open a brace. And, for me very important, to put the semicolon ';' at the end in the same level as the first line.

Hope this helps. Cheers

PS: For very short statements, however, I recommend to use only 1 line.

If you are working in a team setting, agree and follow a common convention. If you are working on your own, define a convention and stick to it. The important point is less what the convention is and more that you are consistent with it.

Personally, I would format that like this:

$("#plus.tooltip").animate({
    'width': '100px',
    'height': '200px'
}, {'duration': 300});

In this case, I would not use an object for the options, but would pass a numeric parameter as the duration parameter see docs:

$("#plus.tooltip").animate({
    'width': '100px',
    'height': '200px'
}, 300);

If there were multiple calls on the same jQuery selection, I would put the first function call on a new line and indent it:

$("#plus.tooltip")
    .stop()
    .animate({
        'width': '100px',
        'height': '200px'
    }, 300);

Per the question in the comments, I would do that as so:

$("#plus.tooltip").animate(
{ // properties
    'width': '100px',
    'height': '200px'
},
{ // options
    'duration': 300
    'queue': false,
    'easing': 'swing'
});

Basically, though, choose what suits you and stick to it.