2

tumblrページのヘッダーは、ページの上部に表示されなくなったときにその拡大と縮小をアニメーション化しようとすると、少しびくびくしているように見えます。

ウェブページはTobaccoEndeavoursで、tumblrブログです。

<script type="text/javascript">                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            $("#abracadabra").fadeOut(500, function(){ 
                $("#header").animate({padding:"1.5em 0"}, 500);
            });
        } else {
            $("#abracadabra").fadeIn(500, function(){ 
                $("#header").animate({padding:"1em 0"}, 500);
            });
        }
    }); 
</script>

たくさんの人に感謝します。

4

4 に答える 4

1

stop()そしてfadeTo()時々いくつかの奇妙な問題を修正することができます:)

jsBinデモ

$(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            $("#abracadabra").stop().fadeTo(500,0, function(){ 
                $("#header").stop().animate({padding:"1.5em 0"}, 500);
            });
        } else {
            $("#abracadabra").stop().fadeTo(500,1, function(){ 
                $("#header").stop().animate({padding:"1em 0"}, 500);
            }); 
        }
});

あなたの問題について：

DOCSから：

.fadeOut（）メソッドは、一致した要素の不透明度をアニメーション化します。不透明度が0に達すると、display styleプロパティはnoneに設定されるため、要素はページのレイアウトに影響を与えなくなります。

びくびくした結果を引き起こします。一方、fadeTo（）メソッド

期間を0に設定すると、このメソッドは不透明度CSSプロパティを変更するだけなので、.fadeTo（0、opacity）は.css（'opacity'、opacity）と同じです。

ご覧のとおり、ページのレイアウトにうまく影響しています。

于 2012-10-22T23:57:02.890 に答える
1

スクロールイベントは何度も発生する可能性があるため、次のようにフラグを使用して同時実行を制御する必要があります。

<script type="text/javascript">
    window.flag = true;                                         
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 1) {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeOut(500, function(){ 
                   $("#header").animate({padding:"1.5em 0"}, 500, function() {window.flag = true;});
               });
            }
        } else {
            if (window.flag) {
               window.flag = false;
               $("#abracadabra").fadeIn(500, function(){ 
                   $("#header").animate({padding:"1em 0"}, 500, function(){window.flag = true;});
               });
            }
        }
    }); 
</script>

更新：

コードのタイプミスを更新しました。上記の新しいバージョンをお試しください。

于 2012-10-22T23:58:15.843 に答える
0

スムーズではなく、jQueryアニメーションを参照してください

..アニメーションのイージングパラメータを線形に設定するだけです。

気が向いたら、代わりに人々が作ったプラグインもあります。

于 2012-10-22T23:55:32.100 に答える
0

jQuery / JavaScriptアニメーションは時々びくびくすることがあり、個人のハードウェア設定に依存することもあります。アニメーションでやりたいのは、トランジションのあるcssクラスを作成し、クラスを追加することです。さらに、反対の遷移を持つ別のcssクラスを作成し、そのクラスを追加してアニメートします。これはかなりうまく機能し、私が間違っていなければ、ブラウザの互換性が向上します。

于 2012-10-22T23:55:46.203 に答える