- 締切済み
画像をランダムにフェードイン
【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか？ よろしくお願いします。
- bntt
- お礼率60% (3/5)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞cssを完全に取り除き、文字だけの表示にする方法がよくわからない それって、javascriptではなくて、HTMLとCSSの問題では？ 単純に取り除きたいのなら、CSSを適用させているmetaタグを取り除けばすみませんか？ 当然の結果として、レイアウトや見え方は変わりますが…
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＤＬして試してみましたが、問題なく動作するようです。 以下を再確認してください。 1）ＨＴＭＬ、及びスクリプトの文法上の間違いの修正。 ・タグの不整合、タイポ ・括弧の不整合 ・余分な「,」 など 2）初期設定で、参考サイトのように画像を非表示にする。 ＤＬするとindex.htmlがサンプルにあると思いますが、それがまず動作することを確認してください。 次にそのファイルをコピーし、少しづつ修正しながら、動作することを確認してください。 動作しなくなったら、その一歩手前からの修正がおかしいので、一歩手前からやりなおしてください。
- fujillin
- ベストアンサー率61% (1594/2576)
試していませんが… ご提示の参考サイトの中ほどに 『でひとまずこれらの要素に対して非表示する指定を加えておきます』 とあるように、初期設定で非表示の処理が必要なのではないでしょうか？ あとは、重複してchampangneの指定をしているみたいですが、不要なのでは？ また、そのあたりのタグがおかしくなっているようですが…
お礼
仰られた通りに打ち直してみましたがうまく作動しませんでした。 ご指摘ありがとうございます。
お礼
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="title" content="champagne.js by fresh tilled soil" /> <meta name="author" content="fresh tilled soil" /> <meta name="description" content="A jQuery plugin to randomize the display of objects in a grid." /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>champagne.js | fresh tilled soil</title> <link rel="stylesheet" type="text/css" href="demo.css" /> <link rel="stylesheet" type="text/css" href="champagne/champagne.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <script type="text/javascript" src="http://use.typekit.com/obk6jbp.js"> </script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> </head> <body> <div class="container"> <h1>champagne.js</h1> <h2></h2> <nav> <a class="button" href="https://github.com/freshtilledsoil/champagne/zipball/master">Download from Github</a> <ul> <li></li> <li></li> </ul> </nav> <ul class="champagne"> <li>hello</li> <li>hola</li> <li>bon giorno</li> <li>ni hao</li> <li>guten tag</li> <li>namaste</li> <li>hello</li> </ul> </div> <!-- end .container --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="champagne/jquery.champagne.min.js"></script> <script type="text/javascript"> $(function() { $("ul.champagne").champagne(); // Demo $("#view-images").click(function() { if (!$(this).hasClass("active")) { $("#view-text").removeClass("active"); $(this).addClass("active"); $("ul.champagne li").each(function() { $(this).css({height: 70, padding: 0, width: 190}).addClass($(this).text()).contents().remove(); $(this).append("<img src='http://placehold.it/188x68/fafafa/999' alt='Image' />"); }); $("ul.champagne").champagne(); } }); $("#view-text").click(function() { if (!$(this).hasClass("active")) { $("#view-images").removeClass("active"); $(this).addClass("active"); $("ul.champagne li").each(function() { $(this).removeAttr("style").contents().remove() $(this).append($(this).attr("class")).removeAttr("class"); }); $("ul.champagne").champagne(); } }); }); </script> </body> </html> indexから改変したものです。 ランダム表示は出来るのですがcssを完全に取り除き、 文字だけの表示にする方法がよくわからないのでご教授いただければと思います。