締切済み

【jQuery】 googlemap のフェード

2014/04/16 15:46

googlemapをjQueryでフェードインさせると IE以外のブラウザでは指定の場所が表示されません。表示させる方法はありますでしょうか？宜しくお願いします。 ■jQuery $(function() { $("#box").hide(); $("#gMap").hide(); $("#box").fadeIn(1000,function(){ $("#gMap").fadeIn(600); }); }); ■html <div id="box">あいうえお</div> <div id="gMap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4820130764!2d139.70051100000003!3d35.689754400000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0892532b1%3A0x6b5d24f0d0eacf29!2z5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yT5LiB55uu77yT77yY4oiS77yS!5e0!3m2!1sja!2sjp!4v1397613553985" width="100%" height="350" frameborder="0" style="border:0"></iframe></div>

okogedesuga
お礼率68% (15/22)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

balloon23
ベストアンサー率69% (16/23)

2014/04/18 14:46 回答No.2

カテゴリーのjavascriptからも外れちゃってますけども参考までに。アニメーションはcssで行って、jqueryではクラスの付与だけ行うと軽いかもしれません。今度はjquery使う必要性に疑問符が出るかもしれませんが。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * {margin:0;padding:0;line-height:1;} div { opacity:0; } @keyframes fadein_start { from { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } to { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } } .fadein_start { -webkit-animation-name: fadein_start; animation-name: fadein_start; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-play-state: running; animation-play-state: running; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> jQuery.event.add(window,"load",function(){ $("#box").addClass("fadein_start"); $("#gMap").addClass("fadein_start"); })(); </script> </head> <body> <div id="box">あいうえお</div> <div id="gMap"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4820130764!2d139.70051100000003!3d35.689754400000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0892532b1%3A0x6b5d24f0d0eacf29!2z5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yT5LiB55uu77yT77yY4oiS77yS!5e0!3m2!1sja!2sjp!4v1397613553985" width="100%" height="350" frameborder="0" style="border:0"></iframe></div> </body> </html>

ログインすると、全ての回答が全文表示されます。

balloon23
ベストアンサー率69% (16/23)

2014/04/17 15:49 回答No.1

※注意点・思いつきです・IEのバージョンによっては対応できないかも --------------------------- 以前同様のケースがあった気がしますので回答させてください。 hideで指定せず、たとえばcssでopacity:0;→animateで1にしたりする方法はどうでしょう？ css3のアニメーション使えば手軽に行ける、かもしれません。

質問者