同时打开

Question

我想要创建悬停一个类似于下面的链接块的flyup JQuery的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 
    });   
}); 

您可以测试代码here。

这应该做到这一点！

希望帮助:)