質問: 100; setTimeout(function(){ if(s > m) { $(".fix_menu").stop().fadeIn('slow'); } else if(s < m) { $(".fix_menu").stop().fadeOut('slow'); } },500); }); }); ``` このようにしました。 これである程度挙動を制御出来たのですが 指でスクロール中はアニメーションが停止し半透明などになります。 このスクロール中でもfadeIn,fadeOutを続行するようには出来ないものなのでしょうか? お手数おかけいたしますがよろしくお願い致します。
回答: 質問のコードでは、`scroll`イベントが呼び出されるたびに`setTimeout`の登録がされています。 `scroll`イベントはちょっとスクロールされる間に何十回と呼び出されるものですので、`$(".fix_menu")`は`fadeOut`,`fadeIn`,`stop`を何十回と繰り返そうとして、結果的に点滅状態になるのです。 `fadeIn`などの呼び出しは、スクロール値が一定の高さを超えたその瞬間だけ呼び出すようにすれば、問題は起きません。 また、ディレイ部分として`setTimeout`を使われていますが、`jQuery`ならば、`delay`を使えば、`fadeIn`などのアニメーション処理と相性がよいです。 ``` var s_old = $(window).scrollTop(); $(window).scroll(function () { var m = 100; var s = $(this).scrollTop(); if ((s_old < m)&&(m <= s)){ $(".fix_menu").stop().delay(500).fadeIn('slow'); } else if ((s < m)&&(m <= s_old)){ $(".fix_menu").stop().delay(500).fadeOut('slow'); } s_old = s; }); ``` これでおおむね希望通りの動作になるはずです。 stopは消したほうが良いかもしれません。好みで調整してください。