jQuery의 너비 애니메이션이 보이는데도 오버플로가 보이지 않는다.

Question

나는 div의 width을 jQuery의 .animate()을 사용하여 늘리고있다.

div에는 경계가 부모 경계와 교차하는 절대 위치에있는 하위 요소가 들어 있습니다.

애니메이션이 시작되면 부모 요소 외부에있는 자식 div의 부분이 보이지 않게되고 애니메이션이 끝나면 다시 볼 수 있습니다. 이 애니메이션을하는 동안에 jQuery를 자동으로 애니메이션

<div id=parent> 
    <div id=child> 
    </div> 
</div> 

#parent{ 
    width: 200px; 
    height: 200px; 
    background: blue; 
    position: relative; 
    overflow: visible; 
} 
#child{ 
    width:100px; 
    height: 10px; 
    background: red; 
    position: absolute; 
    right: -50px; 
    top: 100px; 
} 

$("#parent").animate({width: '300'}, 2000); 

LIVE DEMO

Answer 1

는 overflow:hidden;에 요소를 강제로. !

당신은 중요한 CSS 스타일로이 문제를 해결할 수 있습니다

#parent{ 
    width: 200px; 
    height: 200px; 
    background: blue; 
    position: relative; 
    overflow: visible !important; 
} 

---

편집 CSS 우선 순위로 인해, 인라인 스타일 !important 스타일을 오버라이드 (override) 할 수 있습니다. 그렇다면 다음과 같이 시도하십시오.

$("#parent").animate({width: '300'}, 2000).css('overflow', 'visible', 'important');