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. If I try using .slideUp() nothing happens as if it is trying to slide it down. Can anyone explain this to me?

$(".slide").hover(capIn, capOut);

function capIn(){
    //slide top caption down
    var $topcap = $(this).children(".topcap");
    $topcap.slideDown("slow");

    //slide bottom caption up
    //!! Why does slideDown slide caption up here?
    var $botcap = $(this).children(".botcap");
    $botcap.slideDown("slow")
}

function capOut(){
    //slide top back up
    var $topcap = $(this).children(".topcap");
    $topcap.slideUp("slow");

    //slide bottom back down
    var $botcap = $(this).children(".botcap");
    $botcap.slideUp("slow");
}

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. If I try using .slideUp() nothing happens as if it is trying to slide it down. Can anyone explain this to me?

$(".slide").hover(capIn, capOut);

function capIn(){
    //slide top caption down
    var $topcap = $(this).children(".topcap");
    $topcap.slideDown("slow");

    //slide bottom caption up
    //!! Why does slideDown slide caption up here?
    var $botcap = $(this).children(".botcap");
    $botcap.slideDown("slow")
}

function capOut(){
    //slide top back up
    var $topcap = $(this).children(".topcap");
    $topcap.slideUp("slow");

    //slide bottom back down
    var $botcap = $(this).children(".botcap");
    $botcap.slideUp("slow");
}

• javascript
• jquery
• hover
• slidedown
• slideup

• 3 can you post the markup or better if you can make a demo on jsfiddle – Rafay Commented Feb 10, 2012 at 16:32
• Can you provide a fiddle - your description is hard to visualise. – Rory McCrossan Commented Feb 10, 2012 at 16:32
• Need more markup as to whats going on in HTML and CSS. Hard to tell just based on this javascript whats going wrong – Downpour046 Commented Feb 10, 2012 at 16:38
• fiddle isn't giving me a unique url. Saves as jsfiddle/#save. Are they still down for maintenance? – Jonathan Eckman Commented Feb 10, 2012 at 16:43

3 Answers 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.

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

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.