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从重装。

希望有所帮助！：）

如何使用JQuery在页面上滑动IFRAME而不重绘它？

1 个答案: