平滑 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 比较陌生，因此欢迎任何其他关于如何改进我的方法的 cmets。谢谢！

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");
});