JavaScriptでローディング画面が消えてから、アニメーションを実行したいのですが、

Question

ページの読み込みが終わり、ローディング画面が消えてから、
アニメーションを実行したいのですが、

ローディングを下記のように設定し、

$(function() {
  var h = $(window).height();
  $('header,main,footer').css('display','none');
  $('#loader_bg ,#loader').height(h).css('display','block'); 
});
$(window).load(function () {
  $('#loader_bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
  $('header,main,footer').css('display', 'block');
});

アニメーションをTimelineMaxライブラリを使って下記のように記述すると

var tlcp = new TimelineMax();
tlcp.from('.main_copy_img',2,{ease: Back.easeOut.config(1.7),y: '-20%',scale: 1.5, opacity:0})
		.from('.mein_copy_text', .8, {rotation: 20,y: '-20%',scale: 1.2, opacity:0},"-=1")

ローディングの最中にアニメーションが実行されてしまうため、どうしても思うように動きません。
TimelineMaxで遅延させるdelayなどを使用して調整したり試したのですが、アニメーションが変な所で止まった状態から開始されたりし、なかなか調整ができません。

ローディング画面が消えてから実行したいので、ローディングのJSを簡易にし、下記のように
TimelineMax内で実行することで、なんとかやりたい形には近づけたのですが、
簡易のため、ローディングの動きが少し単調になってしまいます。

$(window).load(function () {
var tlcp = new TimelineMax();
tlcp.to('#loader_bg', 2,{display:'none'})
		.from('.main_copy_img',2,{ease: Back.easeOut.config(1.7),y: '-20%',scale: 1.5, opacity:0})
		.from('.mein_copy_text', .8, {rotation: 20,y: '-20%',scale: 1.2, opacity:0});
});

処理後に実行したいので、.when()、.done()というのも使ってみましたが、うまく動きませんでした。

他に良い方法がございましたらご教示いただけないでしょうか。
よろしくお願いいたします。

Answer 1

$('#loader_bg').delay(900).fadeOut(800); の fadeOutにコールバックを指定してそこで処理してはいかがでしょう。

$('#loader_bg').delay(900).fadeOut(800, function() {
    // フェードアウト後の処理
});

【【jQuery入門】fadeOut()でHTML要素をフェードアウトする方法まとめ！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト】
https://www.sejuku.net/blog/62845#fadeOut-3

【.fadeOut() | jQuery API Documentation】
http://api.jquery.com/fadeOut/

Comments

[jyoze]

kei344さん
ありがとうございます！
ご教示いただいたコールバックを使うことで解決できそうです！