如何'slideUp'剩下的部分div？

Question

我有一个 div，我使用绝对定位和隐藏溢出仅显示顶部的一部分。当您将鼠标悬停在我想显示 div 的剩余部分时。根据里面的信息，这个 div 可能是不同的总高度。

https://jsfiddle.net/5abs1ocf/4/

.showAll {
    bottom: 0px;
}

.showLittle {
    top: 265px;
}

和 jQuery:

$(item).find('.info').toggleClass('showLittle showAll');

正如您从 this example 中看到的那样，我在 "pops" 从一个到另一个的地方工作。我真正想要的是让它动画化并 "slide" 上下移动，而不仅仅是 "popping" 从一个到另一个。

有什么建议吗？

Answer 1

不要使用 top 属性，而是使用负 bottom 值：

.showLittle {
    bottom: -105px;
}

然后使用过渡：

.info {
    transition: all .2s;
}

演示：JSFiddle

如果您想要动态高度，另一种方法是使用 jQuery 计算偏移量：

    var elementHeight = -($('.info').height() - 34);
    console.log(elementHeight);
    $('.showLittle').css('bottom', elementHeight);

并设置如下CSS:

.showAll {
    bottom: 0 !important;
}

演示：JSFiddle

Answer 2

您不需要 Javascript，只需使用 CSS。

.info {
    bottom: 0;
    margin-bottom: -102px;
    transition: margin 0.5s ease;
}
.tree:hover .info {
    margin-bottom: 0;
}