如何jQuery中

Question

逆轉高度有生方向我有2周的div像下面;

<div id="diva">diva</div> 
<div id="divb">divb</div> 

風格像;

div{ 
    display: block; 
    overflow: hidden; 
} 
#diva{ 
    background-color: gray; 
    width: 200px; 
    height: 200px; 
} 
#divb{ 
    background-color: blue; 
    width: 200px; 
    height: 0px; 
    margin-top: -40px; 
} 

2區具有0高度默認，但是當鼠標進入第一個div膨脹。 JavaScript是;

$("#diva").mouseenter(function(){ 
    $("#divb").animate({ height: "40px" }); 
}).mouseleave(function(){ 
    $("#divb").animate({ height: "0px" }); 
}); 

一切工作正常，因爲它應該。但我想扭轉第二個div的高度動畫方向。現在，在本條件下，從頂部起的第二格滾動到底時鼠標進入第一格，和卷軸從底部回到鼠標離開時頂部。但我想扭轉這一點。我想股利從底部展開時，鼠標進入到頂部，並希望收縮從上到下當鼠標離開。

我該怎麼做？ Here是工作提琴。

在此先感謝... :)

Answer 1

通過diva築巢divb，使得diva位置relative和divb位置absolute，並把它在底部，我已經實現了你想要的效果。 小提琴：http://jsfiddle.net/Jcrbm/
CSS：

div{ 
    display: block; 
    overflow: hidden; 
} 
#diva{ 
    background-color: gray; 
    width: 200px; 
    height: 200px; 
} 
#diva{ 
    background-color: gray; 
    width: 200px; 
    height: 200px; 
    position:relative; 
} 
#divb{ 
    background-color: blue; 
    width: 200px; 
    height: 0px; 
    position:absolute; 
    bottom:0px; 
} 

HTML：

<div id="diva">diva 
    <div id="divb">divb</div> 
</div> 

Answer 2

如果你不想修改HTML，你可以在同一時間height動畫margin-top實現這一目標：

$("#diva").mouseenter(function() { 
    $("#divb").animate({ 
     height: "40px", 
     marginTop: -40 
    }); 
}).mouseleave(function() { 
    $("#divb").animate({ 
     height: "0px", 
     marginTop: 0 
    }); 
}); 

http://jsfiddle.net/a9vpS/3/