• ベストアンサー

opacityについて

$(function(){ $("#s1").animate({ $(this).css("opacity","0") },3000); }); html <div id="s1"><img src="1" width="300px" height="300px"></div> 質問：消えると思ったのですが、3秒後に画像が消えませんでした。 できないのでしょうか？ 画像を時間で消える方法があればご教授ください

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

ANo3です。 質問者様にはわかっている情報でも、私にはわからない情報がたくさんあります。 それは回答中に質問の形式で記述してはいますが、まったくお答えをいただけません。 例えば、タイミングの制御をどのような考えで行おうとしているのかが不明です。（そもそも何をしたいのかがよくわかりませんが・・・） ただ、タイミングを制御したいのだろうと推測して、制御可能な方法の例を提示したつもりですが ＞試してみたんですが、上手くいきませんでした。 とのお答えだけなので、動作しなかったのか、動作したけれど欲しいものとは違っていたのか、違っていたのならどのように違うのかなどなどがまったくわからないので、補足のしようがない状態です。 それなので、質問に対するお答えだけ・・・ 1）googleのサイトからjQueryをロードしています。 　コピペでも動作するように（こちらでは質問者様の環境がわかりませんので）、ネットに繋がっているブラウザであれば間違いなくjQueryをロード可能なように記述しています。 　それなので、普通に自分のサーバからロードする記述に変えても同じ動作をするはずです。 2）items.each(function(i, e){ $(e).css("zIndex", n-i);}); の記述のことではないかと推測しますが、この部分は 　function(i, e){ 　　$(e).css("zIndex", n-i); 　} という関数を一行に書いているだけなので、i、eは通常の関数の引数です。 ただし、jQueryのeachメソッドに渡す関数になっていますので、iには要素のindexが、eには要素が渡される約束になっています。 　http://api.jquery.com/each/ jQueryに関しては（↑）が公式サイトですので、調べたいことがあればここで調べるのがよろしいかと思います。 ＞本ではこれをオブジェクトなんて書いてあるやつもありますが、 通常オブジェクトといわれるものは 　object = new Object()や　object = {} などで生成されるものを言うと思います。 　functionを用いてユーザ定義し、new演算子で生成することも可能です。 「これ」が何を指しておっしゃっているのか不明ですが、オブジェクトは用いていません。iやeは単にローカルの変数（引数を受け取る変数）です。 ＞何分指導者いませんので 　私も暇つぶしの独学者です。 　最近はネット環境が発達しているので、大抵のことはネットで調べることが可能です。ただし、情報の真偽については自分で確かめる必要はありますが… 3）var c = 0, sequence = [1000, 3000, 4000, 5000];　は 　var c = 0; 　var sequence = [1000, 3000, 4000, 5000]; と同等で、変数の定義と初期値を設定しています。 提示したスクリプトでは、sequence（配列）が、リストの画像の表示時間（正確にはfadeの所要時間）を示しています。 簡単に書くと、 　1.画像Ａが1秒かけてフェードアウト（画像Ｂが見える） 　2.画像Ｂが3秒かけてフェードアウト（画像Ｃが見える） 　3.画像Ｃが4秒かけてフェードアウト（画像Ｄが見える） 　4.画像Ｄが5秒かけてフェードアウト（画像が見えなくなる） という順序で実行される際の 　「1秒、3秒、4秒、5秒」をデータにしたものです。 そのようになっていないでしょうか？ もしも、全部が同じ時間で良いのであれば単一の処理で良くなるので、スクリプトももっと簡略化できるでしょう。 ＞後にlenngthを使ってますが、苦手なハッシュのところですよね 文章の意味が分かりかねますが、lengthではあらかじめリストの項目数を調べているだけです。 提示したスクリプトは、項目数が変わってもHTMLに画像を付け足して、それに応じて上記の時間（fadeの所要時間）のデータを付け足しさえすれば動作するように考慮してあるつもりです。 ＞たぶんこれだと時間のコントロールができないのでは？と思います 何の時間をコントロールなさりたいのかが私にはわかりませんので、fadeの所要時間を個別に指定できるものを一例として作成してみたのですが・・・ 違う時間をコントロールなさりたい場合も、同様の方法で可能ではないかと想像します。 ＞.animate()とかsetInterval()とか今まで自分が ＞カールセルなんか作ってきましたが、これをフラッシュみたいにしたいのです 何をなさりたいのかよくわかってませんが、ANo2の補足のスクリプトから想像するものに比べると、『カールセルのスライドショー』を作成する方がものすごく大変だと想像しますけれど、違うのでしょうか？ フラッシュとはAdobe Flashのことでしょうか？ Flashもスクリプトでいろいろなことが実現できますので、フラッシュのようといわれてもどのようなものなのかまったく想像がつきません。

yonbakukan
質問者

補足

折角張っていただいたんですが、英語はほとんど読めないのですが、 何をしたいのか？が解らないというお話しですので、トップページにつかうような 画像スライドショーをやりたいのです。 一応他の方法でもできない事はないのですが、 画像を一定の部分で呼び出すようなやり方は リンクが一つしか設定ができない為に 今回他の方法をチャレンジしてます。

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

ANo2です。 補足を見ましたが、どのようにしたいのかよくわかりませんでした。 思った通りの時間制御ができないということでしょうか？ 時間制御に関しては、二通りの考え方があると思います。 一つは、若干の誤差を許して順序が正しく繋がっていれば良いとする考え。もう一つは時間ピッタリに（もちろん順序も）シナリオ通りの進行をしようという考えです。 確認してはいませんが、jQueryのfade(3000)などでは最初に時間計算を行っている可能性が高いので、実行中に他のアニメーション等が重なっていると、絶対的な時間に誤差が生まれやすいです。 例えば、Ａを3秒後に消す、Ｂを3秒後に表示という処理を別個に行うと、必ずしもピッタリ連続するとは限りません。 上記の前者の考え（順序を正しく）的に考えれば、「Ａを3秒後に消す、消したらＢを表示」という処理にすれば、誤差はあっても連続した処理が可能です。 このような処理を実現するには、delayやcallback関数を利用することで可能となります。 一方で、後者の考えのような時間重視で誤差を最少にしたい場合は、タイマーを常に参照して修正しながらシナリオを実行するように記述する必要がありますので、シナリオ実行部分はライブラリに頼らず自作することが必要となるでしょう。 大抵の場合は、多少の誤差があっても大きな問題はないので、前者のような処理にしていると思います。 例えば、ご提示の以下のスクリプトですが… ＞$(function(){ ＞$("#s5").fadeIn(4000); ＞$("#s5").fadeOut(13000); ＞}); 対象の要素は表示状態にありますので、fadeIn(4000)はほとんど意味を持ちません。 また、fadeIn(4000)とfadeOut(13000)が同時に処理されるような場合は、途中の状態は予測がつかない状態になります。幸い、jQueryでは同じ要素に対するアニメーションはキューにストックして順に処理する方式をとっていますのでそのようなことはおきませんが、上記の処理全体で概ね17秒かかるというつもりで記述なさっているでしょうか？ さらに、このような処理を複数個、それぞれ別個に記述なさっていますので、順序を制御しようという意図をもった記述とはなっていません。（別の言い方をすれば、指定時間に頼って順序を指定しようとしている） また、$(function()～～　の列挙には意味がありませんので、まとめて記述なさるほうが視認性もよくなることと思います。 なさりたいことが良くわかってませんが、fadeOutの所要時間を変えながら順に消えてゆく処理をcallback関数を利用して記述する一例をご参考までに… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #s1, #s1 li{ margin:0; padding:0; list-style-type:none; } #s1, #s1 img{ width:300px; height:300px; } #s1{ margin:auto; border:solid 2px #00ffff; position:relative; } #s1 li{ position:absolute; top:0; left:0; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> $(function(){ var c = 0, sequence = [1000, 3000, 4000, 5000]; var items = $("#s1 li"), n = items.length; items.each(function(i, e){ $(e).css("zIndex", n-i);}); fade(); function fade(){ if(sequence[c] && c<n) items.eq(c).fadeOut(sequence[c++], fade); } }); </script> </head> <body> <div> <ul id="s1"> <li><img src="A.jpg" alt=""></li> <li><img src="B.jpg" alt=""></li> <li><img src="C.jpg" alt=""></li> <li><img src="D.jpg" alt=""></li> </ul> </div> </body> </html>

yonbakukan
質問者

補足

試してみたんですが、上手くいきませんでした。 画像スライドショーにしたかったんですが、 たぶんこれだと時間のコントロールができないのでは？と思います .animate()とかsetInterval()とか今まで自分が カールセルなんか作ってきましたが、これをフラッシュみたいにしたいのです。 ただやった感じ色々質問なんですが 1.<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> のファイルが無いとできないのでしょうか？ 2.i,eってありますが、これは引数ですよね。つまりjavascriptとあわせてやっている事ですよね。 本ではこれをオブジェクトなんて書いてあるやつもありますが、何分指導者いませんので 書いてある事しか解りません。 3.var c = 0, sequence = [1000, 3000, 4000, 5000]; これがよく解りませんでした。後にlenngthを使ってますが、苦手なハッシュの ところですよね。だとするとこれが時間？ 他もなんとなくしかわかりませんが、ノードと近い事をやっているのかな？と思います。 すいませんね。初心者ですので。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

「jQueryを利用しているのかな～」と想像いたしますが・・・ 1）最近のブラウザには大抵デバッグツールがありますので、ご質問の前にスクリプトの確認に利用なさる習慣をつける方が宜しいかと思います。 2）ライブラリのメソッドにもそれぞれ書式がありますので、使用する際は確認をなさる習慣をつける方が宜しいかと思います。 　http://api.jquery.com/ これだけでは、役に立たないのかも知れませんので… ＞画像を時間で消える方法があればご教授ください 　文意をはかりかねますが、一例として… 　setTimeout(function(){ 　　document.getElementById("s1").style.visibility = "hidden"; 　}, 3000); jQeryをご利用なら 　$("#s1").hide(3000);　とか 　$("#s1").fadeOut(3000);　などなど

yonbakukan
質問者

補足

実はdadeを使った画像スライダーを作ろうと思ってます。 css　 #s1{ width:300px; height:300px; border:solid 2px #00ffff; position:relative; margin:auto; } #s1 p{ margin:0; } #s1 img{ position:absolute; } $(function(){ $("#s3").fadeOut(3000); }); $(function(){ $("#s4").fadeIn(1000); $("#s4").fadeOut(7000); }); $(function(){ $("#s5").fadeIn(4000); $("#s5").fadeOut(13000); }); $(function(){ $("#s6").fadeIn(10000); $("#s6").fadeOut(20000); }); --> </script> </head> <body> <div id="s1"> <div id="s2"> <p><img src="rtp/06.jpg" width="300px" height="300px" id="s3"> <img src="rtp/04.jpg" width="300px" height="300px" id="s4"> <img src="rtp/13.jpg" width="300px" height="300px" id="s5"> <img src="rtp/10.jpg" width="300px" height="300px" id="s6"> <img src="rtp/05.jpg" width="300px" height="300px"> </div> </div> </body> </html> 画像を順番に消す方法を考えたんですが 三番目からは薄くなってしまってタイミングが合わないです。 いい方法ないだろうか？

回答No.1

3秒かけて消したいのか、3秒たったら消したいのか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 【jQuery】サムネイル

    3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });

  • 画像スライダーをやってますが

    <script type="text/javascript"> <!-- $(function(){ var sty=$("#s1"); sty.each(function(){ var mo1=$(this); var mo2=mo1.find("ul"); var mo3=mo1.find("li"); var mo4=mo1.find("li:first"); mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); --> </script> </head> <body> <div id="s1"> <ul> <li><img src="rtp/7.jpg" width="300px" height="300px"></li> <li><img src="rtp/9.jpg" width="300px" height="300px"></li> <li><img src="rtp/10.jpg" width="300px" height="300px"></li> </ul> </div> </body> </html> 見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。 今日は前半をなんとかやったんですが mo3.css({display:"block",opacity:"0",zIndex:"1"}); の部分のdisplay:"block"はなぜやっているのかが解りませんでした。 最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。

  • 教えてください!

    教えてください！jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか？ コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); よろしくおねがいします

    • ベストアンサー
    • CSS
  • CSSで画像の横に余計な余白が・・・

    質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。

  • JQUERY slideshowについて

    slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで３枚の写真を動かしています。 で、トップページの写真を９枚にして、左３枚・真ん中３枚・右３枚というふうに動かしたいです。 トップイメージの写真（幅900px）３枚を トップイメージの写真（幅300ｐｘ）×３を３枚スライドにする （意味不明ですか・・・） 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、ＣＳＳのＺーindexを使っています。 現在のＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> 求めるＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> この　js　を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); });

  • jqueryで画像切り替え

    この場をお借りして教えて頂ければ幸いです。 jqueryについて、今現在添付画像のようなサムネイルをマウスオーバーしますと、 メイン画像が切り替わるようなものをｊjqueryを使用して制作しました。 ここから、setIntervalを使用して画像が何もしなければ勝手に切り替わるように、 またマウスオーバーをしている際は切り替わらないように、そしてマウスアウトしたら そこの画像から順にsetIntervalが開始されるようにしたいと思っております。 そこの作業が出来ず困っておりまして、是非ともお教え頂ければと思います。 今現在のhtml , css , jsの方は記載しておきます。※reset.cssは除きます。 <body> <div id="wrap"> <div id="sec1"> <div id="photoBox"> <ul id="photo"> <li><img src="img/plan1.jpg" alt="食1" /></li> <li><img src="img/plan2.jpg" alt="食2" /></li> <li><img src="img/plan3.jpg" alt="食3" /></li> </ul> <ul id="thumb"> <li class="first"><img src="img/plan1_s.jpg" alt="" /></li> <li><img src="img/plan2_s.jpg" alt="" /></li> <li><img src="img/plan3_s.jpg" alt="" /></li> </ul> </div> 　　　　</div> </div> </body> -------------------------------------------------------------------- div#wrap{ width:394px; margin:0 auto; } div#photoBox{ width:394px; height:391px; padding:40px 0; border-bottom:1px solid #CCC; } div#photoBox ul#photo{ width:394px; height:295px; padding-bottom:5px; position:relative; } div#photoBox ul#photo li{ width:394px; height:295px; display:block; position:absolute; top:0; left:0; } div#photoBox ul#thumb{ width:394px; height:91x; position:relative; } div#photoBox ul#thumb li{ float:left; padding-left:5px; } div#photoBox ul#thumb li.first{ padding-left:0; } --------------------------------------------------------- (function(){ var photo = $('#photo').find('li'); var thumb = $('#thumb').find('li'); photo.hide().eq(0).show(); thumb.hover(function(){ $(this).stop().fadeTo('fast', 0.6); photo.stop().fadeTo('fast', 0) .eq($(this).index()) .stop().fadeTo('fast', 1); }, function(){ $(this).stop().fadeTo('fast', 1); }); })

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • javascriptで文字サイズ変更-cssが効かない

    こちらのサイトのスクリプトを使用してやってみています。 http://www.nrym.org/storeroom/neta/01_fontsize/ line-heightを各サイズで指定したいのと、このスクリプトでは縮小率拡大率％指定になっているのですが、これをピクセル指定にしたいのです。 そこで下記のように書き換えました。 fontchanger.js ------------------------------------------ show: function() { var id = this.id; document.writeln([ '<div id="' + id + '">', '<img src="moji.gif" width="50" height="20" alt="文字の大きさ" class="moji" />', '<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする"><img src="moji_s.gif" width="20" height="20" alt="小" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す"><img src="moji_m.gif" width="20" height="20" alt="中" class="moji" /></a>', '<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする"><img src="img/size_l.gif" width="20" height="20" alt="大" class="moji" /></a>', '</div>' ].join("\n")); Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this)); Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this)); Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this)); }, onClickSmall: function(e) { this.change('10px' ); }, onClickMedium: function(e) { this.change('12px'); }, onClickLarge: function(e) { this.change('14px'); } }; css ------------------------------------------------- body{ font-size:12px; line-height:14px; } #fffsss{ width:100px; margin:0; padding:0; } #fontChanger{ } #fontChanger-small{ font-size:10px; line-height:12px; } #fontChanger-medium{ font-size:12px; line-height:14px; } #fontChanger-large{ font-size:14px; line-height:16px; } html ------------------------------- <div id="fffsss"> <script type="text/javascript"> <!-- FontChanger.start('js/fontChanger'); //--> </script> </div> ----------------------------------------------------- これがサイズは変更できるのですが、cssが効きません。 line-heightを指定できて、単位は全てピクセルにするにはどうしたらいいでしょうか？よろしくお願い致します。

  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか？ テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" /> 　<div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" /> 　<div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • jquery:animate中にイベントを付与

    #box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1） ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000～-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが～pxになったときを拾うようなイベントは存在するのでしょうか？その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する