jquery - 我如何使用 JQuery 将 IFRAME 滑出页面而不重绘它？

Question

关于 http://www.lastcalc.com我在页面右侧有一个 IFRAME，当您单击右上角的“隐藏帮助”按钮时，IFRAME 会滑出页面。再次单击可将 IFRAME 滑回。

至少在 Chrome 中，问题是 IFRAME 的宽度似乎在它滑出页面时发生了变化，这导致它在滑动时被重新绘制 - 这不是很漂亮。

这是我用来将 IFRAME 滑入和滑出页面的代码:

$("DIV#help-button").click(function() {
        var helpIframe = $("IFRAME#helpframe");
        if (helpIframe.is(":visible")) {
            $('DIV#worksheet').width('100%');
            $("DIV#help-button span").text("Show Help");
            helpIframe.hide("slide", { direction: "right" }, 1000);
        } else {
            $('DIV#worksheet').width('50%');
            $("DIV#help-button span").text("Hide Help");
            helpIframe.show("slide", { direction: "right" }, 1000);
        }
    });

任何人都可以建议我如何通过防止 IFRAME 在页面上滑动/滑动时重绘来使它更流畅吗？

Answer 1

实际上我上周五遇到了这个问题。您的问题很可能与您使用的 .hide() 和 .show() 方法类型有关。我没有深入研究它，但似乎当您在隐藏显示中使用效果和/或方向时，它会强制 iframe 重新加载。

我通过更改为 .animate() 方法解决了这个问题。

您的隐藏方法可能看起来像这样:

helpIframe.animate({ right: [number of pixels], opacity: 0.0 }, 1000);

那么你的 show 方法可能如下所示:

helpIframe.animate({ right: 0, opacity: 1.0 }, 1000);

我必须在“隐藏”中添加一个带有实际 .hide() 的回调，并添加一个 .show()，然后再设置回动画以避开一些不透明问题在 IE7 和 IE8 中，但它似乎阻止了我的 iframe 重新加载。

希望对您有所帮助! :)