The talented team at Enlighten has recently been investigating jQuery as a platform for enhanced user interface design and general ajaxy goodness recently, and I've been having the odd sensation that its actually a form of programming that I enjoy (wtf?).
However I recently ran into a huge problem when I was trying to do slideUp and slideDown hide/show of a div for the new Vadmin Email Marketing System interface. The slide's seemed to be really jerky compared to a fade or other jQuery animations. It took me hours but after not much luck searching the net, I figured out what was happening, so I'm posting this in hopes it will help ease someone elses frustration.
jQuery's slideUp involves finding the starting height of a div, animating that height to zero, and then setting display: none; on the div. Unfortunately if you are familiar with the correct HTML/CSS box model, you'll know that the height of an element does not include padding, borders, or margins. So say your box is 20px tall, with 10px of padding (making it essentially 40px tall), jquery will find the 20px height, reduce it to zero, and then hide the whole div, even though there's still 20px of box padding still visible. This applies to margins and borders as well, and the only way that I could find around it is to nest a "padding" div inside the div you're trying to hide and apply your styles to that instead.
This is quite the pain in the arse for most applications of this, and I would be overjoyed if someone wrote a jquery plugin for an alternate slide that worked in a more usable manner.