12

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

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

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

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

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

提前谢谢了，

贝琳达

4

4 回答 4

12

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

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

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

于 2009-07-06T03:35:05.047 回答
7

从 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>
于 2010-11-17T21:16:36.310 回答
1

嗯 - 它似乎是浏览器或 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>
于 2009-07-06T03:47:26.660 回答
0

visible或者，您可以使用!important规范表明您对保留元素的偏好。

#box {
  overflow: visible !important;
}
于 2014-08-26T23:51:45.313 回答