Stack Exchange
How do I read this?
I am trying to understand a jQuery plugin and I'm seeing things like this all over the un-minified source:
"y" === self.options.direction && node.stop().scrollTop(floorActive * WH),
"x" === self.options.direction && (node.stop().scrollLeft(floorActive * WW), nodeChildren.each(function(index) {
    $(this).css("left", index * WW);
})), chocolate && (nodeChildren.each(function(index) {
    $(this).css({
        left: self.options.direction[index][1] * WW,
        top: self.options.direction[index][0] * WH
    });
}), node.stop().scrollLeft(self.options.direction[floorActive][1] * WW).scrollTop(self.options.direction[floorActive][0] * WH));

I see things similar to this everywhere too:
return $.each(floorCollection, function() {
    (!floor || Math.abs(this[axis] - goal) > Math.abs(floor[axis] - goal)) && (floor = this);
}), floor && -1 !== directionArray.indexOf(floor) ? directionArray.indexOf(floor) : false;

How would these things normally be written out in a more traditional syntax?

Are you talking about the anonymous functions?

Yes. What are you talking about exactly?

Or is the Ternary Operator tripping you up?

There are a few different things going on here - I'd agree that most of them aren't necessarily best practice.

The author appears to be using commas to group expressions, which effectively puts them into a single statement.
The author is using short-circuit evaluation of condition && statement to mean if (condition) { statement }. Using commas and parentheses allows condition && (expression, expression, expression) to be the same as if (condition) { statement; statement; statement; }. This leads to some less-than-legible code like ... && (floor = this), where a statement is wrapped in parentheses to allow it to be evaluated as an expression.
The author is using left-hand comparison, i.e. 5 == x instead of x == 5. One advantage of this is that mistaken use of = instead of == is a syntax error.
The author is using short-circuit evaluation within comparisons, i.e. (a || b) > foo, which compares a if a is truthy or b otherwise.

All of this is valid, none of it is particularly recommended in my opinion. The commas in particular seem like a really illegible approach.

Thank you so much. Your answer is greatly appreciated and helped my to understand how the code is being parsed.

Not sure what you are talking about, but here is the code more readable:
if ("y" === self.options.direction) {
    node
        .stop()
        .scrollTop(floorActive * WH);
}
if ("x" === self.options.direction) {
    node
        .stop()
        .scrollLeft(floorActive * WW);
    nodeChildren.each(function(index) {
        $(this).css("left", index * WW);
    });
}
if (chocolate) {
    nodeChildren.each(function(index) {
        $(this).css({
            left: self.options.direction[index][1] * WW,
            top: self.options.direction[index][0] * WH
        });
    });
    node
        .stop()
        .scrollLeft(self.options.direction[floorActive][1] * WW)
        .scrollTop(self.options.direction[floorActive][0] * WH);
}

And the second one:
$.each(floorCollection, function() {
    if (!floor || Math.abs(this[axis] - goal) > Math.abs(floor[axis] - goal)) {
        floor = this;
    }
});
if (floor && -1 !== directionArray.indexOf(floor)) {
    return directionArray.indexOf(floor);
} else {
    return false;
}

