Javascript 打开时的JQuery弹出效果

我正在尝试为悬停时的块创建一个类似于以下链接中的块的弹出框

---

就在幻灯片下方。。。如何使用jquery创建准确的效果？

这里是一个非常基本的示例。现在可以用CSS3完成所有这些，但jQuery的方法是这样的

HTML:

jQuery：

$('.box').hover(function(){
    $(this).animate({
        height: 200
    });
},function(){
    $(this).animate({
        height: 0
    });        
});

您可以测试代码

那就够了

---

希望有帮助：）

我尝试了slideUp（）函数，但什么也没发生。然后我了解到它隐藏了一切，而不是展示一切，这取决于你愿意牺牲什么。如果您不介意丢失动画，那么在CSS3中会更快/更容易/更快。也就是说，如果不支持转换，请执行一些功能检测并应用jQuery。我不知道为什么，但您的代码无法正常工作。你能推荐任何能做到这一点的小部件吗？看看Perception的JSFIDLE，他补充道。我没有时间自己做一个，他也纠正了一些错误：是的，我试过了。当我复制代码进行测试时，hover（）函数不能正常工作。有什么建议吗？

.box {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 0;
    overflow: hidden;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

$('.box').hover(function(){
    $(this).animate({
        height: 200
    });
},function(){
    $(this).animate({
        height: 0
    });        
});