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

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

我在动画内容栏具有绝对定位外面的孩子（通过切缘阴性）。 我们的想法是，孩子们将与巴动画，因为它扩大。

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

我已上载这里一个非常简单的例子，包括网页上的所有脚本： 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;
}

文章来源: jQuery - Animate element that has children absolutely positioned outside it - blinking