javascript - 打开时JQuery Flyup效果

Question

我正在尝试为悬停时的块创建一个flyup，类似于以下链接中的那个...

http://p2power.com/

它就在幻灯片的下方...如何使用 jquery 创建确切的效果？

Answer 1

这是一个非常基本的例子。你现在可以用 CSS3 来做这一切，但这里是 jQuery 的方式。

HTML：

<div class="box">
    <div class="inner">
        <p>Content</p>
    </div>
</div>

CSS：

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

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

jQuery：

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

您可以在此处测试代码。

应该这样做！

希望有帮助:)