JQuery .slideDown() is sliding up

Question

This works but I\'m not sure why. In function capIn(), in my mind the line $botcap.slideDown(\"slow\") should slide the div down. It slides it up.

Answer 1

One possible fix would be to wrap $('.botcap') elements with a container and align the container to the bottom.

Answer 2

This is because of positioning the element with absolute position and bottom: 0; This will actually treat the element as if it is bottom-based, therefore its slideDown() is going upwards. It can be fixed by using top: (height of element) instead of bottom: 0.

Answer 3

jQuery's slideDown and slideUp functions are actually misnomers. As the documentation for slideUp puts it:

Hide the matched elements with a sliding motion.

The hiding is achieved by modifying the height of the element; normally, this means that the lower edge of the element appears to slide up, hence the name. However, if the element is anchored at the bottom (e.g. by setting position: absolute and bottom: 0), the height modification will make the top edge appear to slide down.