jQuery - 动画元素的子元素绝对位于其外部 - 闪烁

Question

请原谅我，如果之前已经解决过这个问题，但找不到任何东西。

我正在制作一个内容栏的动画，该内容栏的子项绝对位于其外部（通过负边距）。 这个想法是，孩子们会随着条形的展开而产生动画效果。

发生的情况是，动画一开始，子项就会消失，然后在动画完成时重新出现。 就好像动画需要在浏览器知道将子元素放在哪里之前完成一样。

我在这里上传了一个非常简单的示例，所有脚本都包含在页面上： http://www.ismailshallis.com/jdemo/

到底发生了什么？ 我有什么选择来解决这个问题？

预先非常感谢，

贝琳达

Answer 1

当 jquery 对元素的高度或宽度进行动画处理时，它会在动画发生时自动在元素上设置 overflow:hidden 。 由于您的子元素位于外部，因此从技术上讲，它是溢出的一部分。 jquery 源代码中执行此操作的代码附近的注释显示“//确保没有任何内容泄漏”。 如果您包含未压缩的 jquery 源代码并注释掉 jquery-1.3.2.js 的第 4032 行（在 animate 函数内）：

//this.style.overflow = "hidden";

您将看到动画按照您预期的方式工作。 除了通过注释掉上面的那一行来修改 jquery 源之外，我不确定还有其他解决方法。

Answer 2

从 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>

Answer 3

嗯 - 看起来它是浏览器或 jQuery 的功能，而不一定是您构建 HTML 或 Javascript 的方式。 我这么说是因为似乎只有 DOM 元素边界框内的像素区域被渲染（尝试移动文本，使文本的一半在外面，一半在里面......你会看到一个“被切断”的部分）

因此，解决方法如下：它在“#box”和“#outside”周围使用包装器 DIV，以便两者都位于包装器的边界框内。

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>   

Answer 4

或者，您可以使用 !important 规范来指示元素保持可见的偏好。

#box {
  overflow: visible !important;
}