.animate 및 DIV의 혼동

Question

간단한 Div 만들기 -> DIV 숨기기 -> 다른 DIV 표시 "과정을 수행하려고하고 있는데 이상한 이유로 .animate 기능이 제대로 작동하지 않습니다.

jQuery("#main").animate({ 
    height: "0px" 
    }, 1200); 

애니메이션 지속 시간이 사업부가 여기에 숨겨진되는 시간을 결정하는 내가 사업부 1 초 후 다시 자신의 표시 상태로 얻을 것이다 일초에두면 의미 (왜 아무 생각이 없다)을, 그것은 아무튼 결정된 애니메이션 기간보다 mote를 숨기고 원래 상태로 돌아갑니다. 여기

는 사업부 구조입니다 :

HTML :

<div id="container"> 
<div id="main"> 

<div class="block1"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block2"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block3"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="block4"> 
<div class="icon"></div> 
<div class="shadow"></div> 
<div class="text"></div> 
</div> 

<div class="center_orb"></div> 
</div> 

CSS :

#container { 
    position:relative; 
    margin: 0 0 0 4px; 
    padding: 0 0 0 0; 
    width:1150px; 
    height: 590px; 
} 

#main { 
    position:relative; 
    height: 590px; 
} 

.block1 { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 563px; 
    height: 282px; 
    background:url(../../images/tuts_block.png); 
    cursor: pointer; 
} 

.block1:hover { 
    background-position: 0px 282px; 
} 

.block1 .icon { 
    background:url(../../images/tuts_iconUsage.png); 
    position:absolute; 
    top: 35px; 
    left: 50%; 
    margin-left: -70px; 
    width: 141px; 
    height: 159px; 
} 

.block1 .text { 
    background:url(../../images/tuts_textUsage.png); 
    position:absolute; 
    top: 235px; 
    left: 50%; 
    margin-left: -124px; 
    width: 248px; 
    height: 33px; 
} 

(다른 CSS 클래스가 동일한 같은 .block1 단지 DIFF 이름과 위치에.

도움이 필요하십니까?

Answer 1

지금 문제가 있습니다. 귀하의 요소는 귀하의 문제를 일으키는 절대적인 위치에 있습니다. 여기

빨간색 테두리

http://jsfiddle.net/6hXDB/1/

JQuery와 애니메이션 동안 숨겨진 오버 플로우 - y를 오버 플로우-X 설정하기 때문에이 문제가 발생

을 #main된다. 따라서 절대 배치 된 요소는 애니메이션 중에 '숨겨 짐'상태가되지만, 일단 이러한 속성이 제거되면 애니메이션의 끝 부분에 다시 표시됩니다.

애니메이션의 콜백에서 #main 안의 모든 것을 숨김으로 설정했습니다.

http://jsfiddle.net/6hXDB/2/