質問: $(this).offset().top; if(topWindow > targetPosition - windowHeight + 100){ $(this).addClass("fadeInDown"); } }) }); =====/// 問題 ///===== ・現状、#intro と #mainは別のクリックで動作しますが、これを一つのクリックイベントで処理したいと思います。 ・#introに overflow-y:hidden; でスクロール禁止にしようと思いましたが、CSSが効きません。 =====/// 補足 ///===== ・SVGアニメーションはLazy Line Painter というJQUERYを使用しています。 どうぞよろしくお願いいたします。
回答: 現状のコードではフェードアウトとフェードインの処理が「無名関数」で定義されています。 それを名前をつけて普通の関数として定義してください。 そうするとjQueryのonとoffで関数名を使ったイベント管理が行えるようになります。 jQueryを使われる場合、イベントはすべてjQueryで管理するのが良いです。 DOM操作によるメモリリークを防ぐこともできますし、イベントの制御も楽になります。 上記の言葉をコードとして記すと、以下のような流れになります。 (フェードイン・フェードアウトの処理は省略しています) ``` function fadeout(){ //フェードアウト処理(省略) //フェードアウトイベントoffしてフェードインイベントon $(window).off('click', fadeout).on('click', fadein); } function fadein(){ //フェードイン処理(省略) //フェードインイベントoffしてもう反応させない $(window).off('click', fadein); } //DOMの準備ができたら $(document).ready(function(){ //SVGアニメーションの設定 $('#logo').lazylinepainter({ //SVG描画完了時にフェードアウトイベントを登録 onComplete: function(){ $(window).on('click', fadeout); } }) .lazylinepainter('paint'); //描画開始 }); ```