javascript - 在方形空间 (YUI) 上重绘元素的问题

Question

这是一个非常非常特殊的案例。获得解决方案之前的标题是“Extreme force redraw element on jQuery”。以下所有内容均未修改。

使用 Squarespace(有很多 YUI 元素)，我在自定义 CSS 上将页脚设置为 display: none。页脚有一个画廊 block (那里有很多脚本)。

然后我使用 prepend 将页脚移动到另一个页面元素中。总而言之就是这些方面的东西:

$yo = $('#yo');
$yo.parent().remove();
$('#here').prepend($yo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer style="display: none">
    delme
    <div id="yo">oi</div>
</footer>
<div id="here">
    move here
</div>

当然，这在这里没有问题。但在我的用例中，它没有。如果我删除自定义 CSS，它有点可以工作。仍然存在一个错误，它无法正确调整大小，并与第一个父级保持相同的大小，而不是第二个。所以，画廊仍然没有正确重绘!事实上，这也不是 CSS display 的错。

remove 没有问题，删除也没有区别。我把它留在那里只是为了让大家瞥见我试图处理的所有噪音。

更重要的是，如果我将其添加到 onLoad 脚本中:

$('footer').hide()

它的工作原理与预期相同。事实上，我越晚隐藏它，它的效果就越好，但永远不会达到它应有的完美程度。如果我将它隐藏在 DOMready 上，它将被破坏一半。如果我将它隐藏在 CSS 中，正如我之前所说，它甚至不会出现。那就是……

在所有情况下，只需打开控制台窗口或使用鼠标手动调整窗口大小，图库就会完全按照应有的方式显示，一切都已正确修复，没有任何问题!

所以，我认为尝试强制重绘应该能让事情正常进行。好吧，事实并非如此。 offsetHeight 不起作用，摆弄 css 也无济于事。当然，我也尝试过 trigger('resize') 但没有成功! :( 尝试了几个小时，似乎没有任何效果，即使在控制台中也是如此!

我会将错误保留在这里一段时间。现在，它显示了将其隐藏在 $(document).ready 中的问题:

http://www.cregox.com/bugs/bannerify/

有没有一种方法可以“简单地”强制重绘，这样我就不必继续挖掘 bleep squarespace 中用 CSS 做了什么，这一切都是乱七八糟的？我敢打赌 sqsp 在这方面做得很好，但至少在我看来它是一团糟。

Answer 1

看来我是对的:Squarespaces 的图库组件需要提醒您已将其移至新区域。

在调用 $('#here').prepend($yo) 后，添加以下行:

Y.one( $yo.get(0) ).simulate('resize');