- ベストアンサー
jQueryでボックスのサイズ変更
jQueryで表示済みのボックス要素（div#box）のサイズを変更しています。 ※ 元のサイズは100×100px $("#box").css("width","250px"); $("#box").css("height","250px"); この時、サイズの変更をスムーズにアニメーションさせるようにするには、何か方法があるのでしょうか？ イメージとしては、lightbox2のように、画像のサイズによってウインドウがスムーズにアニメーションするアレです。 「このページに書いてあるよ」や「こうすればできるよ」など、情報をお待ちしています。 よろしくお願いします。
- ok-rjak
- お礼率51% (63/122)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
animateというメソッドがあります。 $("#box").animate({"width": "250px"}, "slow"); これで幅を250pxにできます。 最後のslowは動作の速度です。 詳細は http://semooh.jp/jquery/api/effects/animate/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D/ ここに書いてあります。
関連するQ&A
- google mapのサイズのcssによる変更
現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって 振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。 google mapは <div id="map" style="width:606px; height:420px;"> のように指定しています。 やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると <div id="pcmap"> <div id="map" style="width:606px; height:420px;"> </div> <div id="smmap"> <div id="map" style="width:406px; height:420px;"> </div> と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。 なにかいい方法はないでしょうか？
- ベストアンサー
- CSS
- jQuery LightBox Plugin動かず
複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。
- ベストアンサー
- JavaScript
- jQueryのアニメーションについて
jQueryのアニメーションについて聞きたいです。 チェックボックスと連動してボックスが表示されるアニメーションはわかりましたが、表示される際のアニメーションはどうすればいいかわかりません。 フロートで横並びになった一番・二番・三番の三つのボックスがあり、三番のみが表示されている場合、三番のボックスが一番左に表示されています。 そこで二番のチェックボックスにチェックをして、二番のボックスを表示ると、二番が左で三番がその右に表示されます。 その際、三番が右にずれるときにアニメーションでスライドできないでしょうか。 現在のソースです。 【CSS/Script】 <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> <style type='text/css'> input{margin:80px 0 0 80px;} div{ display:none; margin:25px; padding:25px; background:#eee; width:200px; height:150px; float:left; } </style> <script type='text/javascript'> $(window).load(function(){ $('#check1').click(function() { $("#box1").slideToggle(this.checked); }); $('#check2').click(function() { $("#box2").slideToggle(this.checked); }); $('#check3').click(function() { $("#box3").slideToggle(this.checked); }); }); </script> 【HTML】 <p> <label><input type="checkbox" id="check1">一番</label> <label><input type="checkbox" id="check2">二番</label> <label><input type="checkbox" id="check3">三番</label> </p> <div id="box1">一番を押してでるのです</div> <div id="box2">さては二番を押したから</div> <div id="box3">どれかと思えば三番でした</div> よろしくお願いいたします。
- ベストアンサー
- 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 の初心者です。 あるサイトから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
- ブラウザの表示サイズに合わせてフォントサイズを自動
お世話になっています。 以前、http://okwave.jp/qa/q8296498.htmlで、質問をさせて頂いて、それなりのページは出来たのですが、新たな質問が．．．．． ブラウザの表示サイズに合わせてフォントサイズを自動で変更する方法（http://blog.4galaxy.net/77.html）を参考にtoppage.phpを作ったのですが、１ページの中で、サイズの違う文字列をブラウザのサイズに合わせてフォントのサイズを自動で変更するには、どうしたら良いですか？ 因みに以下が、私が参考のページを分からないなりに修正したものです。 引用ここからーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!DOCTYPE HTML> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function AutoFsize(){ var wpx = $("div#content").width(); var wpx = $("div#content1").width(); var wpx = $("div#content2").width(); var fpar = (Math.floor((wpx)/(400/100)));// 横幅px ÷ (最少幅px/100) $("div#content").css("font-size",fpar+"%"); $("div#content1").css("font-size",fpar+"%"); $("div#content2").css("font-size",fpar+"%"); } setInterval(AutoFsize,1000);//ミリ秒ごとに横幅チェック //written by http://blog.4galaxy.net/ --> </script> <style type="text/css"> div#content { width:140%; min-width:400px; } div#content1 { width:40%; min-width:400px; } div#content2 { width:100%; min-width:400px; } </style> </head> <body> <div id="content">ここの文字サイズが変わります</div> <div id="content1">ここの文字サイズが変わります</div> <div id="content2">ここの文字サイズが変わります</div> </body> </html> 引用ここまでーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
- ベストアンサー
- CSS
- cssを用いてボックスを作りたいです。
cssを用いてボックスを作りたいのですが、うまくいかず困っています。 http://www.tagindex.com/stylesheet/box/width_height.html ↑内容はここの中段にある使用例から参照しました。 operaではきちんと表示されるのですが、safariでは文字のみの表示となり青色の領域が表示されません。 htmlタグはこれです。 <div id="contents"> <div class="box">横幅50%×高さ100px</div> </div> cssは下記です。 #contents div.box { width: 50%; height: 100px; background-color: #85b9e9; } ※ちなみに#contentsのwidthは770pxあります。 現在、dreamweaverの「ブラウザでプレビュー」で確認してるのですが、この方法が間違っているのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグ
html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグを設定したい。 具体的には、 -------------------------------------------- #box1{・・・・・・} #box1 h2{ font-size:14px; border: solid red 1px; width: 800px; } #box2{・・・・・・} #box2 h2{ font-size:10px; border: solid blue 1px; width: 400px; } -------------------------------------------- というCSSがあり、html上ではbox1の中にbox2が入っています。 -------------------------------------------- <div class="box1"> <h2>あああああ</h2> <div class="box2"> <h2>いいいいい</h2> </div> </div> -------------------------------------------- このとき、CSSの「box1のh2タグの設定」がbox2内のh2タグにおいても反映されてしまいます。 box2内では「box2のh2タグの設定」を反映させたいのですが、どうすればできるのか 教えていただけますでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
お礼
ありがとうございます。 ちょうどこれを入力した後に、たまたま検索したら出てきましたｗ 昨日から探していたんですが・・・ ありがとうございました。