- ベストアンサー
Javascriptで画像のフェードイン
閲覧ありがとうございます。 以下のサイトのように画像を順番にフェードインさせるJavascriptサンプルを探しています。 http://kimuratakahiro.com/portfolio.html ソースを表示させて使用してもうまく表示されなかったので困っています。 jQueryの使用も試してみましたがロードなどの使い方がよくわかりません。DLはできています。 ただコピーペーストするだけでは機能は使えないのでしょうか？ 使用ブラウザはクロームです。 よろしくお願いします。
- bntt
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 参考サイトのもので動作するはずですが、ご提示のHTMLはスクリプトタグの中にHTMLソースまで入れてしまっているのが間違いの元です。 HTMLはあくまでもbody内に直接記述してください。 少し内容を変えた例 ：表示間隔の数字をかえることで間隔が変わります。 （処理内容はほとんど同じです） （全角空白は半角に） <!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"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $('.fade li').hide(); }); $(window).bind("load", function(){ var interval = 300; //表示間隔 for(var i=0; i<$('.fade li').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('.fade li').eq(i).fadeIn(1000); }; } }); //--> </script> </head> <body> <ul class="fade"> <li><img src="img/photo01.jpg" alt="photo1"></li> <li><img src="img/photo02.jpg" alt="photo2"></li> <li><img src="img/photo03.jpg" alt="photo3"></li> <li><img src="img/photo04.jpg" alt="photo4"></li> <li><img src="img/photo05.jpg" alt="photo5"></li> </ul> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
どのようなマークアップで何をしたいのかを明確にしないと… fadeIn/Outのサンプルなら、検索をすれば解説サイトがたくさんあるかと思います。 ＜ごく一例＞ http://ameblo.jp/linking/entry-10211188441.html http://k-hiura.cocolog-nifty.com/blog/2010/06/jquery-70f3.html#imgChange http://www.atmarkit.co.jp/fdotnet/jqueryref/07effect/effect_08.html jQueryそのものがよくわからない場合は、まずはそちらから ＜ごく一例＞ http://allabout.co.jp/gm/gc/39898/ http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html ＞ただコピーペーストするだけでは機能は使えないのでしょうか？ まったく同じ構成で画像の内容が違うだけみたいな場合は、そのままのコピペでいけると思いますが、 そうでない場合は、コピー元がどのように（汎用的なものか否か）なっているかによって状況が変わります。
お礼
すみません、補足の方にお返事をしていました。 フェードインに順番の要素を入れたいのでご説明をお願いします。
補足
参考URLありがとうございます。 http://www.skuare.net/2010/07/javascript_4.htmlを参考にしてマークアップしたものが以下です。 <html> <head> <title>TOP</title> </head> <body> <br> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <ul class="fade"> <li><img src="画像１.png"></li> <li><img src="画像２.png"></li> <li><img src="画像３.png"></li> <li><img src="画像４.png"></li> </ul> $(function(){ $('.fade li').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int=setInterval("doFade(i)",100); }); function doFade() { var list = $('.fade li').length; if (i >= list) { clearInterval(int); } $('.fade li').eq(i).fadeIn(1000); i++; } </script> </body> </html> 表示させてみましたが真っ白の画面のままでした。 どうすればきちんと表示されるのでしょうか？ よろしくお願いします。