Smooth out jQuery-UI слепой эффект на шоу | скрыть отображение карты Google iframe

Question

Я ищу лучший подход для отображения или скрытия карты Google iframe с использованием эффекта jQuery blind. В настоящее время карта перескакивает, мигает и повторно меняет себя несколько раз, когда происходит слепой эффект. Есть ли какие-либо предложения относительно способа обойти это и сгладить функцию?

Вот демо:
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"); 
});