1

こんにちは、ブラウザが一定距離スクロールされるとフェードインしてアニメーション化する「トップに戻る」ボタンがあります。問題は、ブラウザがスクロールされるたびに .animate() を何度も繰り返すことです。一度発生したアニメーションを停止する方法はありますか? 乾杯

コードは次のとおりです。

  $('.up_arrow').hide();

  // fade in up arrow 
  $(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.up_arrow').fadeIn(2000, 'swing')

        .animate ({
           opacity: 1,
           left: '+=30'
        },
        {
           duration: '2000',
           easing: 'swing',
           queue: false
        }           
        );

        } else {
        $('.up_arrow').fadeOut(2000, 'swing');
        }
});
});
4

2 に答える 2

2 
$(function () {
    var stop = false;
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100 && stop == false) {
            $('.up_arrow').fadeIn(2000, 'swing')
                .animate({
                opacity: 1,
                left: '+=30'
            }, {
                duration: '2000',
                easing: 'swing',
                queue: false
            });
            stop = true;
        } else {
            $('.up_arrow').fadeOut(2000, 'swing');
            stop = false;
        }
    });
});
于 2012-05-13T13:01:09.703 に答える
1

ここでは stop() メソッドが機能するはずであり、おそらくベストプラクティスになると思います。

例えば

$('.up_arrow').stop().fadeOut(2000, 'swing');

animate() だけでしか使用していませんが、うまくいくはずです。

于 2013-03-21T08:02:49.010 に答える