You know what I like to actually optimize? Getting things working correctly. Think jquery is a waste? Well, lets look at that fading example above. Pretty darn simple, isn't it? Surely nothing tricky there. So lets see. jQuery seems to work fine. How about that more monstrous vanilla.js version they posted. ok, it's working fine in firefox. How about chromium. Oh interesting. Look at that. It fades out almost all the way, but never totally disappears and gets hidden. Why is that? The code LOOKS to be correct (though perhaps that < 0 should be <= 0 ...nope, that wasn't it). Ok lets do some debugging of the opacity value on each iteration:
1
0.9
0.8
0.7000000000000001 (uh oh, I see where this is going)
0.6000000000000001
0.5000000000000001
0.40000000000000013
0.30000000000000016
0.20000000000000015
0.10000000000000014
0.10000000000000014
0.10000000000000014
oh, hey. look at that. chromium never lets the value get below 0, so that function keeps getting called forever, but never actually finishes and hides it. OK, so that's one stike against it.
Here's another thought...what happens if the element with id 'thing' doesn't actually exist? Oops, he forgot to check for null, so anything after his .style in the first line of code line will never get executed because the javascript will abort with an error at that line. OK, 2 strikes.
OK, now what about when it is time to reshow the block we just hid. Hmmmm...now was that #thing object set to block or inline display? Oops, he forgot to save the state. We can set it to blank to go back to the default, but what if it was already overridden before we got to the value? Ooops. Strike 3.
Yes, his example could be adjusted to fix all of these issues, but that's the point. The code looks horrendous and it has at least 3 bugs in that simple example so you are going to have to make it even more complex. Meanwhile my jquery example simply worked and I'm already on to the next thing.