Declaring javascript variables

Question

What's the difference between the two following ways of declaring javascript variables?

Version 1

var shadowBox = $(this);
var startInfo = shadowBox.children('.start-info');
var originalHeight = startInfo.height();

Version 2

var shadowBox = $(this),
    startInfo = shadowBox.children('.start-info'),
    originalHeight = startInfo.height();

I only ask this because I used the second version within a jquery plugin :

(function ($) {
    $.fn.setUpShadowBox = function (options) {
        options = $.extend({
            boxSpeed: 750,
            boxWidth: 998,
            boxPosition: -40,
            heightSpeed: 500,
            scrollSpeed: 750
        }, options);

        return $(this).each(function () {
            var shadowBox = $(this),
                startInfo = shadowBox.children('.start-info'),
                originalHeight = startInfo.height();

            //rest of plugin code
        });
    };
});

but when I used it on a class selector so it had to loop through more than once, it was treating the variables as if they were global and only using the last originalHeight that was set. Once I changed this to the first version of declaring variables, my plugin worked as expected and the variables stayed within their scope.

Why is this?

Answer 1

Did you miss the comma on the first line?

If you do this:

var shadowBox = $(this)
    startInfo = innerContainer.children('.start-info');

Instead of this:

var shadowBox = $(this),
    startInfo = innerContainer.children('.start-info');

startInfo will become a global variable.

Try placing them all on the same line and see what happens.