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

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>