0

アニメーションが継続的にキューに入れられたり、めくられたりするという問題があります。私はこれにあまりにも長い時間を費やしてきたので、深刻な助けが必要です笑。あなたの助けに感謝します:)

だから私が達成しようとしているのは、「ユーザー」がヘッダー/バナーをスクロールした後、ナビゲーションとロゴのサイズが変更され、表示ウィンドウの上部に固定されることです。スクロールしても上部にとどまるため、ページのどこでもナビゲーションを使用でき、上部に戻るとすべて前のヘッダー/バナーに戻ります。

ここでの私の問題は、ロゴを変更してフェードさせると、上に数回スクロールして上下にスクロールすると、ロゴが列に並んでフェードインとフェードアウトを続けることです。これを修正する方法。(ところで、以下のコードの一部は正常に動作していますが、すべてが関連しているわけではありません。問題は #banner と #banner_mini にあります)

 <script>
$(document).ready(function() {
    var yOffset = $("#header").offset().top;
    $(window).scroll(function() {
        if ($(window).scrollTop() >= 200) {
            $("#header").css({
                'top': 0,
                'background-color' : '#000',
                'position': 'fixed',
                'filter': 'alpha(opacity=90)',
                'height': '50px',
                '-moz-opacity': '0.9',
                '-khtml-opacity': '0.9',
                'opacity': '0.9'
            });
            $("#banner").fadeOut(100).delay(400);
            $("#banner_mini").fadeIn(300);
            $("#menu").css({'margin-top':'0px'});
            $("#menu ul li a").css({'font-size':'12px', 'padding':'5px', 'margin-top':'0px'});

        } else {
            $("#header").css({
                'background-color' : '',
                'top': yOffset + 'px',
                'position': 'absolute',
                'height': '200px',
                'filter': 'alpha(opacity=100)',
                '-moz-opacity': '1',
                '-khtml-opacity': '1',
                'opacity': '1'
            });
            $("#banner_mini").fadeOut(100).delay(400);
            $("#banner").fadeIn(300);
            $("#menu ul li a").css({'font-size':'14px', 'padding':'10px', 'margin-top':''});
            $("#menu").css({'margin-top':'147px'});
            }
    });
});

</script>

これらは、変更されている 2 つの div です。

<div id="banner">
        <img src="img/Logo_PNG_edit.png"  width="193" height="187" />
        </div>
        <div id="banner_mini" style="display:none">
        <img src="img/Logo_mini.png" width="162" height="29">
        </div>

これを修正するための助けをいただければ幸いです。

4

2 に答える 2

2

jQuery .stop()を使用する必要があります。現在実行中のすべてのアニメーションを停止します。次のアニメーションを開始する前にこれを行います。

コードに適用した場合の使用例を次に示します。

$("#banner").stop(true, true).fadeOut(100).delay(400);
$("#banner_mini").stop(true, true).fadeIn(300);

最初のパラメーターは、true を渡すとキューをクリアします。2 番目のパラメーターは、現在のアニメーションをその終了状態に移動します。

于 2013-04-03T04:16:24.950 に答える
1

if ($(window).scrollTop() >= 200) // この条件trueは、200 を渡すと発生します。scrollTOPつまり、201、210、500、600 などで呼び出され、elseパーツも同様に呼び出されます。

したがって、彼らがpositionあなたが望んでいたことをすでに達成しているかどうかを確認してください。

var yOffset = $("#header").offset().top;
$(window).scroll(function () {

    if ($(window).scrollTop() >= 200) {
        if ($("#header").css('position') !== 'fixed') {
            $("#header").css({
                'top': 0,
                'background-color': '#000',
                'position': 'fixed',
                'filter': 'alpha(opacity=90)',
                'height': '50px',
                '-moz-opacity': '0.9',
                '-khtml-opacity': '0.9',
                'opacity': '0.9'
            });
            $("#banner").fadeOut(100).delay(400);
            $("#banner_mini").fadeIn(300);
            $("#menu").css({
                'margin-top': '0px'
            });
            $("#menu ul li a").css({
                'font-size': '12px',
                'padding': '5px',
                'margin-top': '0px'
            });
        }
    } else {
        if ($("#header").css('position') !== 'absolute') {
            $("#header").css({
                'background-color': '',
                'top': yOffset + 'px',
                'position': 'absolute',
                'height': '200px',
                'filter': 'alpha(opacity=100)',
                '-moz-opacity': '1',
                '-khtml-opacity': '1',
                'opacity': '1'
            });
            $("#banner_mini").fadeOut(100).delay(400);
            $("#banner").fadeIn(300);
            $("#menu ul li a").css({
                'font-size': '14px',
                'padding': '10px',
                'margin-top': ''
            });
            $("#menu").css({
                'margin-top': '147px'
            });
        }
    }
});
于 2013-04-03T04:20:13.660 に答える