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

或者，您可以使用visible规范表明您希望元素保持!important。

#box {
  overflow: visible !important;
}

jQuery - 具有绝对位于其外部的子项的Animate元素 - 闪烁

4 个答案: