JQueryを使用して画像をゆっくり表示させる

質問

JQueryを使用して画像をゆっくり表示させる

ご覧いただきましてありがとうございます。
今回新規でＨＰを作るにあたり、トップの画像をゆっくりと表示させようと思っています。
そういった画像はFlashで良く見るのですが、Flashを使わずJQueryで作成しようと思っています。
ただ、逆引きのサイトなどを見てもボランクリックで表示やスライドショーの表示方法は載っているのですが
私の理想としている風のはなかなか見つけられません。

詳しい方、ご教授いただけると幸いです。

http://www.wasedasai.net/about

このような風に表示するのが理想です。
ソースを見るとこのサイトもJQueryを使用しているみたいなのですが・・・

回答No.5

yyr446 · ベストアンサー

ご提示のサイトは、jQuery ＋ facebox.js + countdown.js
を使ってますね。トップの画像をゆっくりと表示の部分は
facebox.jsの中に記述してます（本来のfaceboxの仕掛けは現在使ってないみたいですが）

facebox.jsの先頭から、
$(function(){
と始まっています。
これはjQueryのコア機能の一つで、
$(document).ready(function(){});
の省略形です。ページの準備が出来たらfunction(){}
を実行するの意味です。

そして、このfunction()の39行目あたりに
$("img").fadeOut(0).fadeIn(1500);
があります。

これが、全ての<img>要素を0秒でフェードアウトさせて、
1.5秒かけてフェードインさせてます。

お礼

とっても分かりやすい回答ありがとうございました。

回答No.4

fujillin

単に表示するだけなら　fadeIn([speed])　でよいのでは？

$element.hide().fadeIn(2000);　みたいな感じ。

speedを変えることで、速度を調節できます。

補足

ご回答ありがとうございます。
日本語リファレンスだと文字をクリックしてから動作が作動しますが、
クリックしないで、ページを開いたら動作が開始するように設定する場合はどうしたらよいのでしょうか・・・？

回答No.3

yyr446

JQueryの
　fadeIn([speed], [callback])
では、だめなんですか？

http://semooh.jp/jquery/api/effects/fadeIn/%5Bspeed%5D%2C+%5Bcallback%5D/

最初非表示にしておいて、fadeInで、じょじょに表示

$(function(){
$("#top_gazo").hide();
$("#top_gazo").fadeIn("slow")
});

回答No.2

yamada_g

No.1です。
続けてですみません。

fadeTo()の方が希望に近いような気がしたので。

http://semooh.jp/jquery/api/effects/fadeTo/speed,+opacity,+[callback]/

回答No.1

yamada_g

show関数ではダメなのでしょうか？

http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_effects_basic#a_jquery_effects_show2

例としてあげられているサイトは透明度を変更していくやり方ですかね。