jquery - 当内容展开时，在 jQuery 动画期间展开 iframe

Question

我正在开发一个用户仪表板元素，用户可以在其中与小部件进行交互(非常类似于 iGoogle 仪表板)。我正在使用 jQueryUI portlet 来保存 iframe。我遇到的问题是，当 iframe 中的内容使用 jQuery 动画扩展时，我想实时调整 iframe 的大小。例如，我在 iframe 中有一个自定义 Accordion 控件。当用户单击面板展开 Accordion 时，我调用 slideDown() 函数来显示内容。当 slideDown() 动画完成时，我根据主体的新高度调整 iframe 的大小。结果是 Accordion 的内容向下滑动，直到它们在幻灯片动画期间超出小部件的范围。动画完成后，调整大小会处理新的小部件高度，一切看起来都很好。这是一个非常不稳定的动画，我想调整 iframe 的大小，以便它在 slideDown() 动画期间扩展到 iframe 的主体高度。滑动动画时如何根据body高度展开iframe？

这是我目前正在使用的代码。

// This code gets fired on an accordion panel click event.
content.slideDown(100, function ()
{
    parent.expandContainer('panel1', $('body').height());
});     

// This code resides in the parent page hosting the iframes.
function expandContainer(elementId, height)
{
    $('#' + elementId).children('.content').find('iframe').css('height', height + 'px');
}   

Answer 1

有可能，您必须制作一个 Accordion 才能获得执行动画的步进事件。

我创建了一个动画框。如果框变大或变小，step-event 调用函数 resizeIframe(height)。此函数再次调用父文档中的同名函数 resizeIframe(height)。试试这个演示:

http://algorhythm.de/tools/resizeable-iframe/index.html