Smooth out jQuery-UI blind effect on show|hide toggle of Google map iframe

Question

I'm looking for a better approach to show or hide a Google map iframe using a jQuery blind effect. As it stands now, the map jumps, blinks, and re-sizes itself several times as the blind effect takes place. Are there any suggestions for a way to circumvent this and smooth out the feature?

Here's a demo:
http://jsfiddle.net/hmMRs/

HTML markup:

<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>

Script:

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

I'm relatively new to jQuery so any other comments about how my approach could be improved would be welcomed. Thanks!

Answer 1

I refactored the above code to use the slideToggle() method instead of toggle("blind", 1000) and that seems to have fixed the re-sizing of the iframe content. With this, I did have to recreate the map location center point so that it was located in the correct area of the iframe when expanded. The only noticeable bug is with my Opera 11.62 browser, it does not have the map location centered when the map is shown.

Here's the updated demo:
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;
}

Script:

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