平滑jQuery-UI在显示/隐藏切换谷歌地图iframe的盲目效果

Question

我正在寻找一个更好的方法来显示或隐藏谷歌地图iframe使用jQuery盲目效果。就像现在一样，地图会跳跃，闪烁，并在盲目效果发生时多次调整自己的大小。有什么建议可以规避这个问题并使这个功能变得平滑吗?

下面是一个演示:
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");
});