I Married a Photographer

On the side to exercise my artistic and technical skills, I do a bit of web design. A friend turned me on to jQuery and I’ve been consumed with learning the language through pet web projects for local bands. It somehow wraps all my interests together. Because I have had an interesting (read: frustrating) experience, I feel compelled to share.

In building a certain web site, I intended to have blocks of content appear and disappear with certain events (click, mouseleave) but found frustration when trying to animate them using the $().slideUp and $().slideDown methods. To add to the confusion, the block entering from the window top seemed to work with these methods, but a menu that slid up from the bottom did not. I saw unpredictable behavior; blocks would not move yet their successful callbacks would fire, the blocks would bounce in and out, or the blocks would show the opposite behavior as intended.

That last odd behavior made me think. Why would $().slideToggle work but not $().slideUp or $().slideDown as expected. After searching I came to the idea that the “up” and “down” parts of the method names are not absolute directions! So I quickly tested this idea on the bottom block that is intended to slide down upon $(document).ready after a slight delay. I changed:

$(‘#menu_block’).slideDown(900);

to

$(‘#menu_block’).slideUp(900);

et voila! It worked!  Now, using the $().slideUp method I have commanded the block to slide down.  Why?  I suppose the reason for this is that these methods are based on the idea that all elements are relative to the top. Every example I found demonstrated an element sliding down from the top, none that slid up first from the bottom.

So, in the end I discovered that $().slideUp behaves more predictably if thought of as a method to hide an element and $().slideDown acts to reveal an element despite the actual direction the element travels.