jQuery- 아이들이 절대적으로 바깥에 위치한 애니메이션 요소 - 깜박임

StackOverflow https://stackoverflow.com/questions/1085206

문제

이것이 전에 언급 된 경우, 아무것도 찾을 수 없다면 저를 용서하십시오.

나는 아이들이 그 밖에 절대적으로 자리 잡은 콘텐츠 바를 애니메이션하고 있습니다 (부정적인 여백을 통해). 아이디어는 아이들이 바를 확장 할 때 바로 애니메이션 할 것이라는 점입니다.

일어나는 일은 애니메이션이 시작 되 자마자 아이들이 사라지고 애니메이션이 완료되면 다시 나타납니다. 마치 브라우저가 어린이를 어디에 두어야하는지 알기 전에 애니메이션이 완료 해야하는 것처럼 보입니다.

여기에 정말 간단한 예제를 업로드했습니다. 모든 스크립트는 페이지에 포함되어 있습니다.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;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top