JQuery .slideDown()正在向上滑动

Question

这是有效的，但我不确定为什么。在function capIn()中，在我看来，$botcap.slideDown("slow")这一行应该向下滑动div。它把它往上滑。如果我尝试使用.slideUp()，就好像它试图向下滑动一样，什么也没有发生。有人能给我解释一下吗？

$(".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");
}

Answer 1

jQuery的slideDown和slideUp函数实际上用词不当。正如slideUp的文档所说：

通过滑动运动隐藏匹配的元素。

隐藏是通过修改元素的高度来实现的；通常，这意味着元素的下边缘看起来向上滑动，因此得名。但是，如果元素锚定在底部(例如，通过设置position: absolute和bottom: 0)，则高度修改将使顶部边缘看起来向下滑动。

Answer 2

一种可能的解决方法是用容器包装$('.botcap')元素，并将容器与底部对齐。

Answer 3

这是因为使用绝对位置和bottom: 0来定位元素；这实际上会将元素视为基于底部的元素，因此它的slideDown()向上。它可以通过使用top：(元素高度)而不是bottom: 0来修复。