$("a#run-this-code").on("click", $.stopEvent)
.setContent("Running...")
._("#example").animate("heightTo=0,opacity=1:0", 0.5)
._($.HTTP).GET("/service/hello.html")
._("#example").animate("heightTo=80,opacity=0:1", 0.7);


Oh well, I can dream, can I not?

The way it flattens out async behaviour is quite good, since it makes the ‘flow’ of code much easier to grasp at a glance. Nice.


var example = $('#example');

$('a#run-this-code').on('click', before);


Quite readable, however, naming those functions isn’t really a good idea…

While (judging on your examples) Ojay does a good job of increasing the readability of the code, compared to YUI, while retaining a ‘natural’ flow, how far are you willing to take it? It’s not bad, but it’s not perfect either. That’s basically the point I tried to make: While chaining is one thing, how about using strings and .toSource() them into objects to feed YUI when an object will never contain a function? Perhaps even create wrappers with a few parameters for often-used combinations (like the example on your frontpage) so there’s even less typing?


$('a#run-this-code').on('click', function(link, e) {
e.stopEvent();
link.setContent('Running...');
var example = $('#example');
example.animate({
height: {to: 0},
opacity: {from: 1, to: 0}
}, 0.5, {
after: function() {
$.HTTP.GET('/service/hello.html', {}, {
onSuccess: function(transport) {
example.setContent(transport.responseText);
example.animate({
height: {to: 80},
opacity: {from: 0, to: 1}
}, 0.7);
}
})
}
});
});


I’ve run into plenty of examples where the nesting gets so deep the flow of the code is completely intractable, so I wanted to come up with something that made it clear which order things are happening in. Also, using chaining rather than nested functions, setTimeouts etc means if you want to remove one of the steps, you only need to modify the code in one place rather than two or more.

I know the example is not particularly elegant, but I wanted to demonstrate several concepts — events, ajax, animation, asynchronous chaining — in one short snippet. Hopefully the other examples through the documentation are better examples of style.

I could see myself using jQuery accidentally with this. :-x

lib.insertInto(ex, dat);
lib.animate(ex, "height-to:80,opacity-from:0,opacity-to:1", 0.7);


The more readable your code is, the easier it is to maintain by multiple developers and especially new developers.

lib.animate(ex, {
height: { to: 80 },
opacity: { from: 0, to: 1 }
}, 0.7);


Which one has a high degree of readability? I’d wager the second one, at least, in a glance. Yes, chained code is just as self-explanatory, but it’s my experience that when I’m scanning a document with lots of chained coding, the reading speed suffers considerably because of all the punctuation and characters.