- 締切済み
【jQuery】 googlemap のフェード
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)
カテゴリーの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)
※注意点 ・思いつきです ・IEのバージョンによっては対応できないかも --------------------------- 以前同様のケースがあった気がしますので回答させてください。 hideで指定せず、たとえばcssでopacity:0;→animateで1にしたりする方法はどうでしょう？ css3のアニメーション使えば手軽に行ける、かもしれません。
関連するQ&A
- このjQueryの意味を説明してください。
jQuery の初心者です。 あるサイトからjQueryでクロスフェードさせる内容のものを 参考にしているのですが、セレクタなどの個々の意味が いまひとつ理解出来ません。 調べて自分なりの解釈を書きましたが、訂正などがありましたら ご説明頂ければと思います。 ■html <div class="box"> <img src="1.png" width="600" height="200" alt="" /> <img src="2.png" width="600" height="200" alt="" /> <img src="3.png" width="600" height="200" alt="" /> </div> ■css .box{ position:relative; height:300px; width:400px; } .box img{ position:absolute; left:0; top:0; } ■js $(function(){ $('.box img:gt(0)').hide(); //0より大きい数字のimgをhideする setInterval(function(){ $('.box :first-child') //.box内の一番目 .fadeOut(1500) //1.5秒かけてフェードアウト .next('img') //次のimgを .fadeIn() //フェードイン .end() //終わったら？？ .appendTo('.box'); //.boxに追加？？ },4000); //4秒間隔で繰り返す });
- 締切済み
- JavaScript
- jqueryとjavascriptの競合？
どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> <div class="header"></div> <div class="main">**フロートで左に配置 <iframe></iframe> </div> //１． //jqueryの「iframe-auto-height」プラグインを使って、 //読み込まれた内容に応じてiframeの高さを変えるようにしたい。 <div class="menu">**フロートで右に配置</div> //２． //jqueryの「portamento」プラグインを使って、 //画面が縦長になりスクロールしてもこの「メニュー」が //画面に追従してフロートするように（常に画面上に現れている様に）したい。 //３． //このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■ 「１．」「２．」のjqueryは、同時にちゃんと動作しました。 が、「３．」を加えると「１．」が動きません。 「２．」は常に正常に動作します。 「１．」と「３．」が競合しているようなのですが、 私はみなさんが提供してくださっているスクリプトを“切り貼り”して 使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 ★「３．フロートするメニューボックスの中のリンクから、 表示する内容に応じて高さが可変するiframeの内容を切り替える」 にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> /// １．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> ///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> /// 『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 /// フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 /// は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> /// 『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> /// 『フロートボックス』用読み込み＆スクリプト </body> 内容は以上となります。 何卒よろしくお願いいたします。
- 締切済み
- JavaScript
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQueryを使ってランダムに表示
jQueryを使って5つのボックス要素を、ランダムに3つ表示させています。 現在はページを読み込むたびに表示を切り替えていますが、これを「一定時間で表示を切り替え」に変更する事は可能でしょうか？ できればjsのみの修正でできれば良いのですが…。 どなたかお助けください。よろしくお願いいたします。 jsとhtmlは以下のようにしています。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length; for(var i = 0; i < num && i < chn; i++) { var r = parseInt(Math.random() * (chn - i)) + i; $(this).children().eq(r).show().prependTo($(this)); } }); } }); $(function(){ $("[randomdisplay]").each(function() { $(this).randomdisplay($(this).attr("randomdisplay")); }); }); }); <div randomdisplay="3"> <div id="box">ランダム1</div> <div id="box">ランダム2</div> <div id="box">ランダム3</div> <div id="box">ランダム4</div> <div id="box">ランダム5</div> </div>
- ベストアンサー
- JavaScript
- jQueryを使用してのメガメニューの記述
色々試してみたのですが、どうしてもわからず、 どうかお知恵をおかしください。 宜しくお願いいたします。 こちらの紹介サイトを参考に、メガメニューを作成しております。↓ http://codesign.verse.jp/jquery/2009/08/megamenu.html メガメニューボタンにマウスオーバーしたときに、 DIVに指定しているmm-div内のものが表示されるよう指定されているのですが、 そのメニューの中でいくつかmm-divのサイズを変更したく、 それに伴いjQueryで表示させる位置の指定を複数記述したいのですが、 jQueryを勉強不足のため、どうしてもうまくいきません。 mm-divはCSSでサイズを記述しているので、 別途指定するものとして新しいDIVに指定するタグとして mm-div2を準備しましたが、１つに連動してしまいます。 説明べたで申し訳ありませんが、 mm-divとmm-div2それぞれに別の位置が指定できる記述に仕方を教えてください。 $(function(){ var target=$("div#megamenu"); var tli=$("ul#mm-ul > li.mm-li"); var tdi=$("div.mm-div",tli); /* if($.browser.msie && ($.browser.version<8)){ var th=; }else{ var th=0; } */ tli.hover( function(){ $("*:animated",tdi).hide(); $(this).animated(); }, function(){ tdi.hide(); } ); $.fn.animated=function(){ var posx=$(this).offset().left+tdi.width(); var posbase=tli.offset().left+target.width(); /*地味に計算するための場所orz $("p#showpos").text(posx); $("p#winwidth").text(posbase); */ tdi.hide(); if(posx>posbase){ $(this).children() .css("left",-posx+target.width()) .css("top","25px") .fadeIn("fast"); }else{ $(this).children() .css("left","5px") .css("top","25px") .fadeIn("fast"); } return $(this); } });
- ベストアンサー
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- ランダムなフェードインを作りたいです。
jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル http://jsajax.com/articles/jQuerySimplestSlidesh … の画像を順番通りでなくランダム表示に修正したいです。 自分なりに考えて作ってみたのですが、正しく機能しませんでした。 どこをどのように修正すればランダムになるのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simplest jQuery Slideshow</title> <style type="text/css"> body {font-family:Arial, Helvetica, sans-serif; font-size:12px;} .fadein { position:relative; height:332px; width:500px; } .fadein img { position:absolute; left:0; top:0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. … <script type="text/javascript"> var imglist = new Array( "http://farm3.static.flickr.com/2610/4148988872_9 … "http://farm3.static.flickr.com/2597/4121218611_0 … "http://farm3.static.flickr.com/2531/4121218751_a … var select = Math.floor((Math.random() * 100)) % imglist.length; var t0 = "<img src='"+imglist[select]+"' border='0' >"; $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut() .next('t0').fadeIn() .end().appendTo('.fadein'); }, 3000); }); </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" /> <img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" /> <img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" /> </div> </body> </html>
- ベストアンサー
- AJAX
- 【jQuery】setInterval
jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>
- ベストアンサー
- JavaScript
- jQuery 2つのsetInterval
写真と文字を組み合わせたクロスフェードで行き詰りました。 ２つ質問があります。 【質問１】 １番目のテキストがフェードイン→3秒待機→1番目のテキストと 1番目の写真がフェードアウト→2番目・3番目同じ→繰り返し。 という感じにしたいのですが、下記の#text-boxの設定ですと setIntervalで5秒間隔でフェードインになるので#photo-boxとの タイミングが5秒ずれてしまいます。 これを合わせるにはどうすればよいのでしょうか？ 【質問２】 下記のように、１つのdivでテキストと写真を入れると正常に動かなくなります。 それぞれ分けてdiv(#text-box,#photo-box)で囲うと動きます。 この原因はなんでしょうか？ <div id="all-box"> <p class="text">1番目のテキスト</p> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="text">2番目のテキスト</p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="text">3番目のテキスト</p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> 宜しくお願いします。 $(function(){ $("#text-box .text").hide(); setInterval(function(){ $("#text-box") .find(".text:first-child") .fadeIn(1000) .delay(3000) .fadeOut(1000) .next(".text") .end() .appendTo("#text-box"); },5000); $("#photo-box .photo:gt(0)").hide(); setInterval(function(){ $("#photo-box") .find(".photo:first-child") .fadeOut(1000) .next(".photo") .fadeIn(1000) .end() .appendTo("#photo-box"); },5000); }); ■HTML <div id="all-box"> <div id="text-box"> <p class="text">1番目のテキスト</p> <p class="text">2番目のテキスト</p> <p class="text">3番目のテキスト</p> </div> <div id="photo-box"> <p class="photo"><img src="img/01.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/02.jpg" width="500" height="200" alt="" /></p> <p class="photo"><img src="img/03.jpg" width="500" height="200" alt="" /></p> </div> </div> ■CSS #all-box{ position:relative; width:500px; height:200px; } #text-box,#photo-box{ width:500px; height:200px; } #text-box .text{ position:absolute; top:80px; left:0; z-index:2; } #photo-box .photo{ position:absolute; top:0; left:0; width:500px; height:200px; z-index:1; }
- 締切済み
- JavaScript
- マウスをのせてながら、2秒後にフェイドインしたい
すみません、jquery初心者です。 下記の様にコードを書きました。 マウスをのせてから、2秒後にフェイドインはしたのですが、 一瞬だけマウスをのせてもフェイドインしてしまいます。 $(function(){ $("div#aaa").hide(); $("div#bbb a").mouseover(function(){ setTimeout( function () { $("div#aaa").fadeIn(1500); } , 2000 ); }); try { clearTimeout(); } catch ( e ) {} }); マウスをのせてながら、2秒後にフェイドインさせる場合は どのように書けば良いのでしょうか？ ご教授頂けると助かります。 何卒、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
balloon23様 animateは、たしかに出来ますよね。 でも、なぜかFirefoxはかなり重くなります…。 使うか悩むところです。 ありがとうございました。