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

Posted 2023-05-08

【中文标题】jQuery - 具有绝对位于其外部的子元素的动画元素 - 闪烁

【英文标题】：jQuery - Animate element that has children absolutely positioned outside it - blinking

【发布时间】：2010-11-08 06:49:18

【问题描述】：

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

我正在为一个内容栏设置动画，该内容栏的子项绝对位于其外部（通过负边距）。这个想法是，孩子们会随着栏的展开而动画。

动画一开始，孩子们就会消失，然后在动画完成后重新出现。就好像动画需要在浏览器知道将孩子放在哪里之前完成。

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

实际发生了什么？我有哪些解决方法？

非常感谢，

贝琳达

【参考方案1】：

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

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

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

【讨论】：

感谢两位的意见。马特提供了解释，杰夫提供了解决方案，我选择了一个包装器。不理想，因为我现在必须为两个盒子设置动画，但至少它可以工作。谢谢！

这是一部非常出色的侦探作品，马特。我今天学到了一些新东西，谢谢！

哇。刚遇到这个问题，你的解决方案解决了，马特。谢谢！ jQuery新版本的行号自然不正确，但是搜索this.style.overflow = "hidden";找到了。

将动画元素 CSS 设置为 overflow: visible !important; 也可以。 Per this 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>

【讨论】：

对不起。这个技巧很古老。自 1.4.3 版本以来，jQuery 的动画可能发生了很大变化。

太棒了。为我工作（JQuery 1.10）

【参考方案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>   

【参考方案4】：

或者，您可以通过使用 !important 规范来表明您的偏好，即元素保留为 visible。

#box 
  overflow: visible !important;