1

ページ上の特定のポイントに到達すると、要素の表示をなしからブロックに変更するスクロールtoスクリプトを使用しています。

フェードインを適用したり、表示を変更したり、アニメーションGIFを読み込んだりする方法はありますか？

これが私のコードです

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';
    }
}

}

4

3 に答える 3

1

あなたは単にチェーン.fadeIn()または.fadeOut()。その際、.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);

        }
    }
}

PSタイプミスかどうかはわかりませんが、logosmallはクラスですかIDですか。クラスの場合は、前にピリオドを付ける必要があります.logosmall。IDの場合は、前にポンド記号を付ける必要があります#logosmall。

于 2012-04-13T13:13:07.747 に答える
0

変更はどうですか

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

に

$('logosmall').fadeIn();

？

于 2012-04-13T13:09:23.493 に答える
0

私はあなたが何を必要としているのか本当に理解していません。しかし、フェードインを作成したいだけの場合、解決策はここにありますhttp://api.jquery.com/fadeIn/

$('#myDivID').fadeIn('slow', function() {
        // Animation complete
      });
于 2012-04-13T13:11:50.440 に答える