如何使用JQuery將IFRAME從頁面中滑出而不重繪它？

在http://www.lastcalc.com我有一個IFRAME在頁面右側，當你點擊右上角的「隱藏幫助」按鈕時，IFRAME滑動頁面。再次單擊可以重新滑動IFRAME。如何使用JQuery將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的重繪使這種平滑，因爲它在滑動/關閉頁面？

來源

2012-01-30 sanity

最有可能的是，它改變寬度的原因是因爲你使用％而不是固定值。確保iFrames容器也具有固定值。查看Chrome中的「檢查元素」，然後單擊幫助按鈕查看CSS會發生什麼情況。這應該會給你足夠的信息來解決這個問題。 – 2012-01-30 11:22:27

另外，有什麼特別的原因讓你爲什麼使用iframe？ – 2012-01-30 11:23:45

@BenCarey我正在使用IFRAME，因爲內容來自一個單獨的URL - 有沒有更好的方法？ – sanity 2012-01-30 11:35:13

上週五我實際遇到了這個問題。您的問題很可能與您使用的.hide()和.show()方法的類型有關。我沒有深入研究它，但似乎在隱藏節目中使用效果和/或方向時，它會強制iframe重新加載。

我通過改變爲.animate()方法解決了這個問題。

你的隱藏方法可能是這樣的，而不是：

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

然後你的表演方法可能是這樣的：

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

我不得不添加的「hide內回調「與一個實際的.hide()並添加一個.show()之前動畫回來一些不透明的問題在IE7和IE8，但它似乎讓我的重新加載iframe。

希望有幫助！ :)

來源

2012-01-30 18:11:04 jasonmerino

如何使用JQuery將IFRAME從頁面中滑出而不重繪它？

回答

相關問題