スクロールした後に要素をフェードインする方法

Question

スクロールスクリプトを使用して、特定のポイントに達したときに要素の表示をブロックからブロックに変更します。

フェードインを適用したり、ディスプレイを変更したり、アニメーションGIFを読み込んだりする方法はありますか？ここで

は

$('logosmall').fadeIn(); 

に

$('logosmall').style.display = 'block'; 

の変更についての私のコード

window.onscroll = function() 
{ 
if(window.XMLHttpRequest) { 
    if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) { 
    $('logosmall').style.position = 'fixed'; 
    $('logosmall').style.top = '0'; 
    $('logosmall').style.padding = '10px'; 
    $('logosmall').style.display = 'block'; 
} else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) { 
     $('logosmall').style.position = 'absolute'; 
     $('logosmall').style.top = '454px'; 
     $('logosmall').style.display = 'none'; 
    } 
} 

}

Answer 1

ここにあります。その場合は、.stop(true, true)を使用してアニメーションをキューに入れないようにすることをお勧めします。私はまた、あなたのコードをスタイリングに関してより効率的にするように再考しました：

window.onscroll = function() { 

    if(window.XMLHttpRequest) { 
     if (document.documentElement.scrollTop > 454 || self.pageYOffset > 454) { 

      $('logosmall').css({ 

       'position' : 'fixed', 
       'top'  : '0', 
       'padding' : '10px' 

      }).stop(true,true).fadeIn('slow'); 

     } else if (document.documentElement.scrollTop < 454 || self.pageYOffset < 454) { 

      $('logosmall').css({ 

       'position' : 'absolute', 
       'top'  : '454px' 

      }).stop(true, true).fadeOut(0); 

     } 
    } 
} 

P.S.私はタイプミスかどうかは分かりませんが、ロゴはクラスかIDですか？クラスの場合は、期間を.logosmallとしておく必要があります。 IDの場合は、シャープ記号（#logosmall）で始める必要があります。

Answer 2

は何ですか？

Answer 3

私は本当に必要なものを理解していません。あなただけのフェードインを作りたいなら、解決策は、あなたが単に.fadeIn()または.fadeOut()をチェーンhttp://api.jquery.com/fadeIn/

$('#myDivID').fadeIn('slow', function() { 
     // Animation complete 
     });