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:
0.7000000000000001 (uh oh, I see where this is going)
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.
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.