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; 
} 

Div 2의 높이는 기본적으로 0이지만 마우스가 첫 번째 div로 들어가면 펼칩니다. 자바 스크립트입니다.

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

모든 것이 제대로 작동합니다. 하지만 두 번째 div의 방향을 애니메이션으로 반전시키고 싶습니다. 이제 현재 상태에서 두 번째 div는 마우스가 첫 번째 div로 들어갈 때 위에서 아래로 스크롤하고 마우스가 떠날 때 아래에서 위로 스크롤합니다. 그러나 나는 이것을 뒤집고 싶다. 마우스를 입력 할 때 div가 아래에서 위쪽으로 확장되고 마우스가 떠날 때 div가 위쪽에서 아래쪽으로 축소되기를 원합니다.

어떻게하면됩니까? Here은 작동하는 바이올린입니다. diva 위치 relative 및 divb 위치 absolute을하고 바닥에 그것을 넣어, diva에 divb을 중첩함으로써 사전에

덕분에 ... :)

Answer 1

, 난 당신이 원하는 효과를 달성했다. 바이올린 : 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 : 당신이 HTML을 수정하지 않으려면

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

Answer 2

당신이 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/