画像をランダムにフェードイン

締切済

質問者：bntt
質問日時：2012/07/24 13:16
回答数：3件

【参考サイト】
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>

上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。
どうすれば正常に動きますか？
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2012/07/26 19:00

#2です。

＞cssを完全に取り除き、文字だけの表示にする方法がよくわからない
それって、javascriptではなくて、HTMLとCSSの問題では？

単純に取り除きたいのなら、CSSを適用させているmetaタグを取り除けばすみませんか？
当然の結果として、レイアウトや見え方は変わりますが…

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2012/07/25 12:30

#1です。

ＤＬして試してみましたが、問題なく動作するようです。

以下を再確認してください。
1）ＨＴＭＬ、及びスクリプトの文法上の間違いの修正。
　・タグの不整合、タイポ
　・括弧の不整合
　・余分な「,」
など

2）初期設定で、参考サイトのように画像を非表示にする。

ＤＬするとindex.htmlがサンプルにあると思いますが、それがまず動作することを確認してください。
次にそのファイルをコピーし、少しづつ修正しながら、動作することを確認してください。
動作しなくなったら、その一歩手前からの修正がおかしいので、一歩手前からやりなおしてください。

- 0
- 件

通報する

この回答へのお礼

<!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" />


<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/zip … 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> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7 …

<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を完全に取り除き、
文字だけの表示にする方法がよくわからないのでご教授いただければと思います。

通報する

お礼日時：2012/07/26 16:48

No.1

回答者： fujillin
回答日時：2012/07/24 18:53

試していませんが…

ご提示の参考サイトの中ほどに
　　『でひとまずこれらの要素に対して非表示する指定を加えておきます』
とあるように、初期設定で非表示の処理が必要なのではないでしょうか？

あとは、重複してchampangneの指定をしているみたいですが、不要なのでは？
また、そのあたりのタグがおかしくなっているようですが…