JQuery .slideDown() 向上滑动答案

【问题标题】：JQuery .slideDown() is sliding upJQuery .slideDown() 向上滑动
【发布时间】：2012-03-03 02:56:25
【问题描述】：

这可行，但我不知道为什么。在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");
}

【问题讨论】：

如果您可以在jsfiddle.net 上进行演示，您可以发布标记或更好
你能提供一个小提琴 - 你的描述很难想象。
需要更多关于 HTML 和 CSS 中发生的事情的标记。仅基于此 javascript 很难判断出了什么问题
fiddle 没有给我一个唯一的网址。另存为 jsfiddle.net/#save。他们还在停机维护吗？

标签： javascript jquery hover slidedown slideup

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

您必须确保将容器的高度设置为 .botcap 的完整可见高度。

【解决方案3】：

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

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

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

【讨论】：