如何使用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"中.hide()添加一个带有实际内容的回调,并.show()在动画之前添加一个回到IE7和IE8中的一些不透明度问题,但它似乎让我的iframe不能重新加载.

希望有所帮助!:)