- ベストアンサー
横並びの画像を3枚時間差でフェードインさせたいです
すみません。。一度同じ質問をさせていただいたのですが 横並びの画像を3枚時間差でフェードインさせたいのですが サンプルがどこにも見当たらず。。 どなたかご教授いただける方何卒よろしくお願いいたします・・！！ 前回の質問ではＩＥしか対応しておらず、Firefoxとクロームでも対応させたいと思っております。
- cocoaki
- お礼率65% (17/26)
- JavaScript
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
エスパーです。^^; あなたの さいてきちは、いかです。 var myspd = 25; var myx = 10; がぞうの さいずが おおきようなので りさいずします。 ぶらうざに ひょうじされる 画素数と 元の がぞうの 画素数を おなじに します。 /* もしかのうであるのならば、 ういるす駆除けいの、ソフトをとりさります。 もっとも おすすめしたいのが、さいそくのマシンにこうかんすることです。 あと、わたしへの「ありがとうポイント」を MAX に！ （もちろん、じょうだんですが。） */
その他の回答 (7)
- babu_baboo
- ベストアンサー率51% (268/525)
だからそれはきっと、<style>~</style>ぶぶんのなかに、ぜんかくくうはくがあるから。 （きっとおれは、エスパーにちがいない。）
補足
エスパーです！ 全くその通りでした・・・！ ありがとうございます！ ただ・・ＩＥではスピードが異様に遅くｆｉｒｅfoxとクロームでも遅めなのです・・・ 改善方法がございますでしょうか？ 下記の様に設定しています。 var myspd = 1; // 変化する速さ（ミリ秒単位） var myx = 1; // 何%ずつ変化させるか 何度も何度も本当に申し訳ございません・・・
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 >ただ、<ul>のＩＤを(fade)に設定したいのですが <ul id="fade">だとした場合 <script type="text/javascript"> $().ready ( function() { $('#fade li').each ( function(index) { $(this).delay(index*1000).fadeIn(); }); }); </script> で動きます。 #fade liとすることでid="fade"内のliという指定になります。
お礼
こちらも簡単でとても使いやすそうでした！！ ソースが喧嘩しないように改造出来るように 勉強します・・・！ 私の力不足でした・・・。ソースをいただいて解析したいと思います。 ありがとうございました！
補足
ありがとうございます！ ＩＤを設定したところ見事3枚の画像は重い通りの動きをしてくれたのですが 同ページの下部コンテンツにて下記ＵＲＬの様なJqueryの ギャラリーを設置しています。 http://www.twospy.com/galleriffic/example-2.html こちらが表示されなくなってしまいました・・。 ソースが喧嘩している状態なのでしょうか・・ 何度もすみません・・！一度みていただけますでしょうか。
- babu_baboo
- ベストアンサー率51% (268/525)
それはきっと、<script>~</script>ぶぶんを、<head>内にうつしたから。
補足
ありがとうございます！ そのように設定したら画像は表示されたのですが 一番左の画像（px1）のみが綺麗にフェードインで表示され、 後の二枚はすでに表示されている状態からパっと一瞬消えて フェードインが始まりました。 原因を探りましたが情けない事に全く分かりませんでした～・・
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくに。 <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <style> #hoge li img { opacity : 0; filter : alpha(opacity=0); } </style> <body> <ul id="hoge"> <li><img src="image/mainpx_01.jpg" id="px1" width="365" height="484"> <li><img src="image/mainpx_02.jpg" id="px2" width="365" height="484"> <li><img src="image/mainpx_03.gif" id="px3" width="270" height="484"> </ul> <script> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ（ミリ秒単位） var myx = 1; // 何%ずつ変化させるか var mypic = ["px1","px2","px3"]; // 画像のname（順番に並べる） var mycnt = 0; var myp = 0; function mygo() { var s = document.getElementById (mypic[myp]).style; if (100 < mycnt) mycnt = 100; s./*@cc_on @if(1)filter = 'alpha(opacity='+ mycnt+ ')' @else@*/ opacity = (mycnt / 100) /*@end@*/; mycnt += myx; if (mycnt == 100) { mycnt = 0; myp++; } if (myp < mypic.length) setTimeout (mygo, myspd); } mygo (); </script>
補足
ありがとうございました！ やってみましたが画像が表示されずに真っ白になってしまいました・・ なんででしょうか～もう全く分かりません・・・
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 こんな感じでしょうか？ http://hppg.moe.hm/okwave/qa/q7728418/ jQueryを利用できれば比較的簡単なソースで実装できます。 リンク先からソースを見てみてください。
補足
動きはまさにそんな感じです！ ただ、<ul>のＩＤを(fade)に設定したいのですが <script type="text/javascript"> $().ready ( function() { $('ul li').each ( function(index) { $(this).delay(index*1000).fadeIn(); }); }); </script> ここの個所で設定するのでしょうか？ 何も知らなくてすみません・・ JsでのＩＤの設定の仕方をご教授いただいてもよろしいでしょうか？
- too_bad
- ベストアンサー率53% (70/130)
>>1です。 フェードインするだけで前の画像はそのまま残るということでしょうか？ スライドではなくフェードインですよね？ 一定時間で前の画像がフェードアウトし、代わりに前の画像が表示されていた 場所にフェードインする、いわゆるクロスフェードタイプのことを おっしゃっているのではないですか？ ちなみにスライドとは、画像が何枚か並んでいて、それが横に動いて 次の画像を表示させるものを言います。 こういうのがクロスフェード http://exyz.cocolog-nifty.com/good_sleep/2009/02/javascript-0798.html こういうのがスライド http://black-flag.net/jquery/20120215-3671.html どちらが必要かはわかりかねますが、こういうのでよろしいでしょうか？
補足
3枚横並びの画像が順にフェードインで現れてフェードアウトで消えずに そのまま残った状態です。 シンプルな動きなのに難しいです～！ LancerVIIさんの欄に記載されているＵＲＬの動きです～。
- too_bad
- ベストアンサー率53% (70/130)
それはクロスフェードということでしょうか？ 以下のサイトは参考になりますか？
お礼
ありがとうございます。 こちらも確認したのですが、3枚横並びでシンプルに時間差でフェードイン といったサンプルが無かったのです・・ なかなか無いものですね・・・
お礼
本当にお恥ずかしい限りです・・・・。 微妙な数字で調整し、その後500など極端に数字を上げたりして・・。 動きがカクカクに・・。 回答いただいた数値を入れる＋画像サイズを下げる をするとナント理想の動きになりました！！！ ありがとうございます・・・・・！！感謝です～！！ またお世話になるかもしれませんが懲りずによろしくお願いします・・・