同時打開

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。

這應該做到這一點！

希望幫助:)