1

ページの特定のポイントに到達すると、一部の画像が移動した後、一部のテキストをフェードインさせようとしています。すでにページを下に移動して更新した場合は正常に機能しますが、上から領域にスクロールすると正しいアニメーションが実行されますが、テキストが何度も点滅し始めます。これを止める方法はありますか？

これがJavaScriptです

$(document).ready(function(){
            $(window).scroll(function(){
                if ($(this).scrollTop() > 1350) {
               $('#managecontent1').animate({bottom: '0px'},900);
               $('#managecontent2').animate({bottom: '0px'},900,function(){
                        $('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
                   });
           }
                });
        });

これがHTMLです

<div id="twocolumntextcontainer">
        <div id="twocolumntextleft">
            <p>C.M.S. <span>Wordpress</span></p>
        </div>
        <div id="twocolumntextright">
            <p>F.T.P. <span>FileZilla</span></p>
        </div>
    </div>
    <div class="twocolumnlayout">
        <div id="managecontent1">
            <img src="img/wordpresslogo_203x203.png" />
        </div>
        <div id="managecontent2">
            <img src="img/filezillaicon_210x208.png" />
        </div>
    </div>
4

2 に答える 2

1

これを引き起こす条件を設定しました。

見てみると、ウィンドウがスクロールし、scrollTop値が1350pxより大きいたびに、アニメーションがトリガーされています。この時点を超えてスクロールし続けると、アニメーションが継続的にトリガーされます。

条件が満たされたらすぐにeventListenerのバインドを解除することをお勧めします（ページが更新されるまでアニメーションを再度実行したくない場合）。

ifステートメント内にこれを追加します。

$(this).unbind('scroll');

これにより、条件が1回満たされると、スクロールリスナーがウィンドウから完全にアンバインドされます。

于 2013-03-08T04:55:54.583 に答える
0

フォローしてみてください

$(document).ready(function () {
            $(window).scroll(function () {
                $('#twocolumntextcontainer').fadeOut("slow");
                if ($(this).scrollTop() > 1350) {
                    $('#managecontent1').animate({ bottom: '0px' }, 900);
                    $('#managecontent2').animate({ bottom: '0px' }, 900, function () {
                        $('#twocolumntextcontainer').fadeIn('slow');
                    });
                }
            });
        });
于 2013-03-08T04:56:05.143 に答える