jQuery的 - 动画拥有绝对定位外面儿童元素 - 闪烁

Question

原谅我，如果此之前已被解决，找不到任何东西。

我动画内容栏，具有绝对定位的外面孩子（通过负边距）。我们的想法是，孩子们将与杆动画随着其膨胀。

会发生什么事，一旦被作为动画开始孩子消失，然后重新出现在动画完成时。这是因为如果动画需要完成浏览器知道在哪里把孩子们面前。

我已经上传了一个非常简单的例子在这里，包括网页上的所有脚本： http://www.ismailshallis.com/jdemo/

什么是实际发生的？我有哪些选择来解决此问题？

预先非常感谢，

贝琳达

Answer 1

当jQuery是动画的元素的任一高度或宽度，会自动的元件上，而动画正在发生设置overflow: hidden。由于您的子元素位于外，它在技术上溢出的一部分。在做代码附近的jquery源的注释本说“//确保没有偷偷出来。”如果包括未压缩的jquery源和注释掉线4032的jquery-1.3.2.js的（在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元素的边框内的像素区域似乎被渲染（尝试移动文本，该文本的那一半在外面，一半里面......你看到一个“切断”一片文本的，因为它动画。）

因此，这里的工作都是围绕：它使用的包装DIV围绕“#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>   

Answer 4

可替换地，可以表明您的偏好，所述元件保持通过使用visible规范!important。

#box {
  overflow: visible !important;
}