How would I format this JavaScript code so it's more readable

Question

How can I format this code so it's more readable?

$(".card").click(function(){
        $(this).stop().animate({ 
            width:'0px', 
            marginLeft: margin+'px', 
            opacity: 0.5}, 
            500, 
            function(){
               $(this).siblings('.card').animate({
                   width: width + 'px',
                   marginLeft:'0px',
                   opacity:'1'},500);
            });         
});

Answer 1

This is a very subjective question

I am a fan of separating things so each is identifiable and easily maintained in the future. However some will argue this does lead to more code, but more readable code in my opinion.

var animateCallback = function() {
    var props = {
        width: width + 'px',
        marginLeft: '0px',
        opacity: '1'
    };
    $(this).siblings('.card').animate(props, 500);
};
var clickHandler = function() {
    var props = {
        width: '0px',
        marginLeft: margin + 'px',
        opacity: 0.5
    };
    $(this).stop().animate(props, 500, animateCallback);
};
$(".card").click(clickHandler);

Answer 2

This would be my preference:

$(".card")
    .click(function(){
            $(this)
                .stop()
                .animate({
                        width:'0px', 
                        marginLeft: margin+'px', 
                        opacity: 0.5
                    }, 
                    500, 
                    function(){
                        $(this)
                            .siblings('.card')
                            .animate({
                                    width: width + 'px',
                                    marginLeft:'0px',
                                    opacity:'1'
                                }, 500);
                    });
        });

Answer 3

This is really very open ended and is open to many forms of interpretation. The code format below is strictly the way I like to make my code legible.

$( ".card" ).click( function()
{
    $( this ).stop()
             .animate(
                 { 
                     width:'0px', 
                     marginLeft: margin+'px', 
                     opacity: 0.5
                 }, 500,

             function()
             {
                 $(this).siblings('.card')
                        .animate(
                            {
                                width: width + 'px',
                                marginLeft:'0px',
                                opacity:'1'
                            },500);
    });         
});

Only functions parenthesis start on the same vertical. Objects and arrays are always indented 4 spaces beyond the function.

Answer 4

My principle is to start general and get more specific. A good label on something is the fastest way to provide information. Name your functions for what they do and your properties/vars for what they store.

I like my function/object-constructor internals to answer three questions in order:

1. What's local to this scope? (vars and a list of funcs defined later)
2. What's the general action of this thing (basic method calls that lead to output/changes)
3. How does the internally defined stuff work (hoisted function definitions last)

The merits of function hoisting for legibility are of course debatable but I prefer general stuff first, details later to trying to learn the general action of a thing while swimming in a sea of internal function definitions. Note: function hoisting only works with function <label>() definitions, not when you assign anonymous functions to vars as in var someFunc = function(){}.

On the jquery front, I would use the .animate(options, settings) object arguments approach since object literal labels can add a lot more clarity (for instance to what 500 means) but I'm sticking with what you have here in case there's a JQ version issue. Also it's easy to miss methods in chaining. It's okay to use line-breaks between '.' operators and we often do where I work to make all method calls clear.

$('.card').click(animateCards); // name well and intent is clear sooner

function animateCards(){

    //locals(1)
    var optionsObject = {
        //<everything in the first animate arg object>
    }

    //actual comment I would put in my code typically follows:
    //functions defined at bottom:
    //animateCallback - list so we can see the local funcs


    //main (2)

    $(this) //breaking chaining into lines like this can be helpful
    .stop()
    .animate(optionsObject,500,animateCallBack);


    //internal functions (3)

    function animateCallback(){
        //<everything in animate's callback arg>
    }

}//end animateCards - always indicate ending brackets of longer functions