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

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

JQuery .slideDown（）正在向上滑动

3 个答案: