- ベストアンサー
opacityについて
$(function(){ $("#s1").animate({ $(this).css("opacity","0") },3000); }); html <div id="s1"><img src="1" width="300px" height="300px"></div> 質問：消えると思ったのですが、3秒後に画像が消えませんでした。 できないのでしょうか？ 画像を時間で消える方法があればご教授ください
- yonbakukan
- お礼率7% (11/148)
- JavaScript
- 回答数4
- ありがとう数7
- みんなの回答 （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もスクリプトでいろいろなことが実現できますので、フラッシュのようといわれてもどのようなものなのかまったく想像がつきません。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
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>
補足
試してみたんですが、上手くいきませんでした。 画像スライドショーにしたかったんですが、 たぶんこれだと時間のコントロールができないのでは？と思います .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)
「jQueryを利用しているのかな～」と想像いたしますが・・・ 1）最近のブラウザには大抵デバッグツールがありますので、ご質問の前にスクリプトの確認に利用なさる習慣をつける方が宜しいかと思います。 2）ライブラリのメソッドにもそれぞれ書式がありますので、使用する際は確認をなさる習慣をつける方が宜しいかと思います。 http://api.jquery.com/ これだけでは、役に立たないのかも知れませんので… ＞画像を時間で消える方法があればご教授ください 文意をはかりかねますが、一例として… setTimeout(function(){ document.getElementById("s1").style.visibility = "hidden"; }, 3000); jQeryをご利用なら $("#s1").hide(3000); とか $("#s1").fadeOut(3000); などなど
補足
実は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> 画像を順番に消す方法を考えたんですが 三番目からは薄くなってしまってタイミングが合わないです。 いい方法ないだろうか？
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
3秒かけて消したいのか、3秒たったら消したいのか？
補足
折角張っていただいたんですが、英語はほとんど読めないのですが、 何をしたいのか？が解らないというお話しですので、トップページにつかうような 画像スライドショーをやりたいのです。 一応他の方法でもできない事はないのですが、 画像を一定の部分で呼び出すようなやり方は リンクが一つしか設定ができない為に 今回他の方法をチャレンジしてます。