如何讓div從其他div上升？

Question

我知道如何通過爲父母做position:absolute和爲孩子做position:relative來在divs頂部上疊加div，但是我怎樣才能讓div從另一個div上升？我想要達到的一個例子是here。滾動到底部並將鼠標懸停在作品上。

Answer 1

的HTMl

<div id="pic"> 
    <div> 

    </div> 
</div> 

CSS

#pic { 
    position: relative; 
    background: yellow; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
} 

#pic div { 
    position: absolute; 
    bottom: -50px; 
    background: black; 
    height: 50px; 
    width: 100px; 

} 

JQuery的

$('#pic').hover(
    function(){ 
     $(this).find('div').stop(true, true).animate({ 
      'bottom': '+=50' 
     }, 100); 
    }, 
    function(){ 
     $(this).find('div').stop(true, true).animate({ 
      'bottom': '-=50' 
     }, 100); 
    } 
); 

的jsfiddle：http://jsfiddle.net/Z6eLa/2/

Answer 2

向jQuery和z-index介紹自己。

http://api.jquery.com/slideDown/

訣竅這裏了slideDown會讓你的頂格滑下。唯一出現在我腦海的是，而不是擴大底部股票，相反。獲取頂部div，並使其滑動，而其他div顯示在其後面。它應該給出底部div'滑動'的外觀。

請注意，對不起，如果這不起作用。我其實不確定你是否可以讓它滑到一半而不是所有的方式......但祝你好運！

Answer 3

你可以做什麼是絕對的立場，即彈出一個相對定位的盒子，例如：

<div class="featured-image"> 
    <div class="caption"> 
    <p>This is where your text goes</p> 
    </div> 
</div> 

現在，你有，你會希望標題看不見的，除非在滾動。所以，一個簡單的辦法只有CSS來做到這一點：

.featured-image { position:relative; width:300px; height: 400px; } 
.caption { position:absolute; bottom:0; display:none; } 
.feature-image:hover > .caption { display:block; } 

最後一行使得人們看到，當你將鼠標懸停在圖片。

然後，您可以輕鬆地使用jQuery爲其製作動畫。這似乎是他們正在使用的。

$(document).ready(function(e) { 
$(".caption").hide(); 
}); 
var show = function() { 
    $(".caption", this).stop(true, true).show(500) 
}; 
var hide = function() { 
    $(".caption", this).stop(true, true).hide(500); 
}; 
    $(".featured-image").hover(show, hide); 

Answer 4

你不需要JS，只需使用css3轉換。