jQuery- 아이들이 절대적으로 바깥에 위치한 애니메이션 요소 - 깜박임
문제
이것이 전에 언급 된 경우, 아무것도 찾을 수 없다면 저를 용서하십시오.
나는 아이들이 그 밖에 절대적으로 자리 잡은 콘텐츠 바를 애니메이션하고 있습니다 (부정적인 여백을 통해). 아이디어는 아이들이 바를 확장 할 때 바로 애니메이션 할 것이라는 점입니다.
일어나는 일은 애니메이션이 시작 되 자마자 아이들이 사라지고 애니메이션이 완료되면 다시 나타납니다. 마치 브라우저가 어린이를 어디에 두어야하는지 알기 전에 애니메이션이 완료 해야하는 것처럼 보입니다.
여기에 정말 간단한 예제를 업로드했습니다. 모든 스크립트는 페이지에 포함되어 있습니다.http://www.ismailshallis.com/jdemo/
실제로 무슨 일이 일어나고 있습니까? 이 문제를 해결하기위한 내 옵션은 무엇입니까?
미리 감사드립니다.
벨린다
해결책
jQuery가 요소의 높이 또는 너비를 애니메이션하는 경우 자동으로 설정됩니다. overflow: hidden
애니메이션이 일어나는 동안 요소에서. 자녀 요소가 외부에 위치하므로 기술적으로 오버플로의 일부입니다. 코드 근처의 jQuery 소스의 주석은 "// 아무것도 몰래 빠지지 않도록하십시오"라고 말합니다. 압축되지 않은 jQuery 소스를 포함시키고 jQuery-1.3.2.js의 4032 행 (내부 animate
기능):
//this.style.overflow = "hidden";
애니메이션이 의도 한대로 작동한다는 것을 알 수 있습니다. 위의 해당 줄을 댓글을 달아서 jQuery 소스를 수정하는 것 외에는 해결 방법이 확실하지 않습니다.
다른 팁
jQuery 1.4.3 현재 jQuery를 수정할 필요가없는 다른 솔루션이 있습니다. 애니메이션을 시작하기 전에 인라인 스타일로 애니메이션을하는 요소의 '오버 플로우'스타일을 설정하면 jQuery는 '오버 플로우'스타일을 숨겨 두지 않습니다. 예를 들어:
<script type="text/javascript">
$(document).ready(function() {
$("#box a").click(function() {
$("#box")
// Prevents absolutely positioned elements from getting clipped.
.css('overflow', 'visible')
.animate({
height: "410px"
})
// Reset the 'overflow' style. You could also put this in the
// animate() callback.
.css('overflow', '');
});
});
</script>
글쎄 - 그것은 브라우저 또는 jQuery의 함수 인 것 같습니다. 반드시 HTML 또는 JavaScript를 구성한 방식이 아닙니다. DOM 요소의 경계 상자 안에있는 픽셀 영역 만 렌더링되는 것처럼 보이기 때문에 이것을 말합니다 (텍스트의 절반이 외부에 있고 내부의 절반이되도록 텍스트를 움직여보십시오. 애니메이션의 텍스트.)
여기에 작업이 있습니다. "#box"및 "#outside"주변의 래퍼 디브를 사용하여 둘 다 래퍼의 경계 상자 안에 있습니다.
CSS :
#boxWrapper {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -120px; /* extra 20px for the #outside */
background:#ccc;
}
#box {
background: #000;
height:100%;
width:100%;
margin-top:20px; /* give 20px for the #outside */
}
#outside {
background:darkblue;
position: absolute;
top: 0px;
right: 0; }
그리고 HTML :
<div id="boxWrapper">
<div id="box">
<a href="#">CLICK ME</a>
<div id="outside">
I'm positioned OUTSIDE the box
</div>
</div>
</div>
그리고 JavaScript :
<script type="text/javascript">
$(document).ready(function() {
$("#box a").click(function(){
$("#boxWrapper").animate({
height: "410px",
opacity: 0.9,
top: "25%"
}, 1000 );
return false;
});
});
</script>
또는 요소가 남아있는 선호도를 나타낼 수 있습니다. visible
사용함으로써 !important
사양.
#box {
overflow: visible !important;
}