Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.

I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form: $(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });

Here is my specific code and the formatting/indentation that I've come up with:

$('.footnote[id^="ret_"]')
    .removeAttr('title')
    .removeAttr('alt')
    .mouseenter(function(e) {
        var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
 
        $footnoteTooltip.stop(true, false);
        //only completely hide and change text/position if we are hovering over a different footnote
 
        if($footnoteTooltip.html() != footnote)
            $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
        $footnoteTooltip.fadeTo(fadeTime, opacity);
}).mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
});

Is there a more readable way of indenting this?

Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.

I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form: $(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });

Here is my specific code and the formatting/indentation that I've come up with:

$('.footnote[id^="ret_"]')
  .removeAttr('title')
  .removeAttr('alt')
  .mouseenter(function(e) {
    var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
     
    $footnoteTooltip.stop(true, false);
    //only completely hide and change text/position if we are hovering over a different footnote
    if($footnoteTooltip.html() != footnote)
      $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
     
    $footnoteTooltip.fadeTo(fadeTime, opacity);
  })
  .mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
  }) 
;

Is there a more readable way of indenting this?

Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.

I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form: $(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });

Here is my specific code and the formatting/indentation that I've come up with:

$('.footnote[id^="ret_"]')
  .removeAttr('title')
  .removeAttr('alt')
  .mouseenter(function(e) {
    var footnote = $('#footnote_cont_' + this.id.substring(4)).html();
    
     $footnoteTooltip.stop(true, false);
    //only completely hide and change text/position if we are hovering over a different footnote
    if($footnoteTooltip.html() != footnote)
      $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
    
     $footnoteTooltip.fadeTo(fadeTime, opacity);
  })
  .mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
  })
 ;

Is there a more readable way of indenting this?

Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.

I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form: $(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });

Here is my specific code and the formatting/indentation that I've come up with:

$('.footnote[id^="ret_"]')
    .removeAttr('title')
    .removeAttr('alt')
    .mouseenter(function(e) {
        var footnote = $('#footnote_cont_' + this.id.substring(4)).html(); 

        $footnoteTooltip.stop(true, false);
        //only completely hide and change text/position if we are hovering over a different footnote 

        if($footnoteTooltip.html() != footnote)
            $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
        $footnoteTooltip.fadeTo(fadeTime, opacity);
}).mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
});

Is there a more readable way of indenting this?