jQuery的 - 动画拥有绝对定位外面儿童元素 - 闪烁 [英] jQuery - Animate element that has children absolutely positioned outside it - blinking

问题描述

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

Forgive me if this has been addressed before, couldn't find anything.

我是动画内容栏有绝对定位它之外的孩子（通过切缘阴性）。我们的想法是，孩子们将与杆动画，因为它膨胀。

I am animating a content bar that that has children absolutely positioned outside it (via negative margins). The idea is that the children will animate with the bar as it expands.

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

What happens is as soon as the animation starts the children disappear, and then reappear when the animation is complete. It's as if the animation need to complete before the browser knows where to put the children.

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

I have uploaded a really simple example here, all scripts included on page: http://www.ismailshallis.com/jdemo/

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

What is actually happening? What are my options to work around this?

在事先非常感谢，

贝琳达

推荐答案

在jQuery是动画高度或元素的宽度，它会自动设置溢出：隐藏在元素上，而动画正在发生。由于您的子元素被定位外，它在技术上溢出的一部分。在靠近code，这是否说了jQuery源的注释//确保没有偷偷地走。如果包括uncom pressed的jquery源和注释掉的jQuery-1.3.2.js线4032（在动画功能）：

When jquery is animating either the height or width of an element, it will automatically set overflow: hidden on the element while the animation is happening. Since your child element is positioned outside, it's technically part of the overflow. The comment in the jquery source near the code that does this says "//Make sure that nothing sneaks out." If you include the uncompressed jquery source and comment out line 4032 of jquery-1.3.2.js (inside the animate function):

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

您将看到动画作品，你希望的方式。我不知道比上述注释掉该行修改的jQuery源之外的解决办法的。

You will see that the animation works the way you intended. I'm not sure of a workaround other than modifying the jquery source by commenting out that line above.

这篇关于jQuery的 - 动画拥有绝对定位外面儿童元素 - 闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！