jqueryでフェードイン表示！.animateでコンテンツや画像をフワッと表示させる方法

コンテンツをフワッと表示させたい

当サイトのフロントページは画像がやや大きめなのもあってか、少し読み込みが遅いのが気になっていました。
そこで最近はそれほど見かけない手法ですが、読み込みの遅い部分にエフェクトをかけてやればユーザーのストレスが多少和らぐかな？と思いローディングと併せて導入してみました。

1 コンテンツをフワッと表示させたい
- 1.1 フェードイン表示される作業フロー
- 1.2 上から順番に表示されないと不自然になる
2 フワッとまとめ

フェードイン表示される作業フロー

まずフェードイン処理に必要な流れを確認しておきます。

１．フェードインさせるオブジェクトを非表示にしておく
２．オブジェクトを読み込む
３．読み込み完了したらフェードインさせる

１．フェードインさせるオブジェクトを非表示にしておく

まずあらかじめフェードインさせるオブジェクトを非表示にしておきます。
そうしておかないと読み込み完了のタイミングで順次表示された後、jqueryの処理でまた消えて表示と間抜けな感じになってしまいますが、cssに書いてしまうとjavascriptを切っているブラウザで見ると表示されなくなってしまいますので、フェードイン前の状態はスクリプト内に記述しておきます。

$('head').append(
　　'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
);

ちなみに今回はフェードインして少し下から上がってくるエフェクトにするため、opacity:0とmargin-top:10pxを基準値にしています。

２．オブジェクトを読み込む

jqueryのロードイベント.load()で読み込みが完了してから以後の処理が行われるようにしておきます。

読み込み完了したらフェードインさせる

ロードイベント後に.animate()でフェードイン処理を行います。

上から順番に表示されないと不自然になる

単純にクラスを指定してアニメーション処理をさせると、全てのオブジェクトが同時にフェードインを開始してちょっと不自然な感じになります。
ですのでforeach構文を使用して、表示前に段階的にディレイを入れてやります。

var delaySpeed = 200;
var fadeSpeed = 1000;
$('.target').each(function(i){
	$(this).delay(i*(delaySpeed)).animate({opacity:'1',marginTop:'0px'},fadeSpeed);
});

delaySpeedでディレイの初期値を設定して、下のforeachで要素の順番×初期値だけディレイをかけて段階的に表示しています。
fadeSpeedはアニメーションのスピードになります。

フワッとまとめ

上記のコードをまとめるとこうなります。

コードまとめ

<script>
$(function(){
	$('head').append(
		'<style type="text/css">.target{opacity: 0;margin-top:10px;}'
	);
    $(window).load(function(){
        var delaySpeed = 200;
        var fadeSpeed = 1000;
        $('.target').each(function(i){
            $(this).delay(i*(delaySpeed)).animate({opacity:'1',marginTop:'0px'},fadeSpeed);
        });
    });
});
</script>

SAMPLE PAGE

今回は参考にさせていただいたコードほぼそのままでしたが、フローを一つずつ確認することで理解を深めてサンプルコードからカスタマイズもできるようになりますので記事にさせていただきました。
本家と併せて読んで頂いて理解の手助けになれば嬉しいです。