jQuery UI的平滑效果隱藏顯示|隱藏Google地圖iframe的切換

Question

我正在尋找更好的方法來顯示或隱藏使用jQuery盲效應的Google地圖iframe。就目前而言，隨着盲目效應的發生，地圖會跳轉，閃爍並重新調整大小。有沒有什麼建議可以避免這種情況並消除該功能？

這裏有一個演示：
http://jsfiddle.net/hmMRs/

HTML標記：

<button class="button" value="Show map">Show map</button> 
<div class="map" hidden> 
    <iframe width="280" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=37.418436,-122.075443&amp;sspn=0.093391,0.133381&amp;t=m&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;ll=37.422151,-122.083983&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=&amp;output=embed"></iframe> 
    <br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=37.418436,-122.075443&amp;sspn=0.093391,0.133381&amp;t=m&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;ll=37.422151,-122.083983&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
</div> 

腳本：

$(".button").click(function() { 
$(".map").toggle("blind", 1000); 
$(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map"); 
}); 

我是比較新的jQuery的那麼如何任何其他意見我可以改進的方法會受到歡迎。謝謝！

Answer 1

我重構了上述代碼以使用slideToggle()方法而不是toggle("blind", 1000)，並且似乎已經修復了iframe內容的重新調整大小。有了這個，我不得不重新創建地圖位置中心點，以便在展開時它位於iframe的正確區域中。唯一值得注意的錯誤是我的Opera 11.62瀏覽器，它沒有顯示地圖時居中的地圖位置。

下面是更新演示：
http://jsfiddle.net/T7jLf/

HTML：

<button class="button" value="Show map">Show map</button> 

<div id="map"> 
    <iframe class="map" width="280" height="280" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=42.916709,-83.631706&amp;sspn=0.203156,0.303154&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;t=m&amp;ll=37.426752,-122.090421&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=&amp;output=embed"></iframe> 
<br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;aq=0&amp;oq=google&amp;sll=42.916709,-83.631706&amp;sspn=0.203156,0.303154&amp;ie=UTF8&amp;hq=Google+Headquarters,+1600+Amphitheatre+Parkway,+Mountain+View,+CA&amp;t=m&amp;ll=37.426752,-122.090421&amp;spn=0.009543,0.011973&amp;z=15&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
</div> 

<p>Some paragraph text can go here...</p> 

CSS：

#map { 
    display: none; 
} 
.map { 
    margin: .5em .25em; 
} 

腳本：

$(".button").on("click", function() { 
    $("#map").slideToggle("slow"); 
    $(this).text($(this).text() == "Hide map" ? "Show map" : "Hide map"); 
});