FadeIn и fadeOut происходят несколько раз после прокрутки окна

Я пытаюсь изменить src изображения логотипа, если не окно scrollTop и назад с эффектом fadeIn и fadeOut, но даже если вы прокручиваете один раз, fadeIn & Out происходит несколько раз.

Я понял с помощью console.log, что даже если вы прокручиваете один раз (колесо мыши или стрелки), сообщение регистрируется много раз (например, 8, 10 или 15 раз). Это означает, что логотип всегда мигает более 10 раз, прежде чем изменить src на другое изображение.

jQuery:

$(window).scroll(function () {
    if ($(window).scrollTop()) {
        $.when($('#navbar').css('padding', '0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/small-logo.png');
                console.log('bot');
            }).fadeIn();
        });
    } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            $('.logo img').fadeOut(400, function () {
                $('.logo img').attr('src', 'images/top-logo.png');
                console.log('top');
            }).fadeIn();
        });
    }
});

HTML:

<div class="col-lg-12">
   <div class="col-lg-3 logo no-padding-left">
      <a href="index.php">
        <img src="images/logo.png"/>
      </a>
   </div>
   <div class="col-lg-9 no-padding-right">
      <div class="navbar-header">
        <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
               .
               .
               .
           </ul>
        </div>
     </div>
   </div>
</div>

Я нашел и перепробовал много решений (например, .stop(), если анимированные и т. д.), но ничего не работало для меня, и я не знаю, почему.

Заранее спасибо.


javascript scroll html jquery fade
person GeorgeGeorgitsis    schedule 01.03.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

проблема может быть решена с помощью флага, который проверяет, прокручивается ли страница вверх или нет.

Вам просто нужно изменить свой код JS следующим образом:

$isScrolledToTop = false;

$(window).scroll(function () {
    if ($(window).scrollTop()){
        if($isScrolledToTop == false) {
            $.when($('#navbar').css('padding', '0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('bot');
                }).fadeIn();
            });
            $isScrolledToTop = true;
        } 
    } else {
        if($isScrolledToTop == true){
            $.when($('#navbar').css('padding', '20px 0px')).done(function () {
                $('.logo img').fadeOut(400, function () {
                    $('.logo img').attr('src', 'images/small-logo.png');
                    console.log('top');
                }).fadeIn();
            });
            $isScrolledToTop = false;
        }
    }
});

Таким образом, вы выполняете смену изображения только в двух случаях:

  • Вы уходите от верхней части страницы
  • Вы вернетесь к началу страницы

Попробуйте, должно получиться!

Пока

person LucioB    schedule 01.03.2016

arrow_upward
1
arrow_downward

Что, если бы вы встроили короткую задержку, чтобы позволить большему количеству событий прокрутки, прежде чем вы начнете анимировать, как это?

var animationTimeout;
var isAtTop = true;
$(window).scroll(function () {
      if ($(window).scrollTop()) {
         $.when($('#navbar').css('padding', '0px')).done(function () {
            if (isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                        $('.logo img').attr('src', 'images/small-logo.png');
                        console.log('bot');
                    }).fadeIn();
                }
                , 100);
             });
             isAtTop = false;
         }
     } else {
        $.when($('#navbar').css('padding', '20px 0px')).done(function () {
            if (!isAtTop) {
                if (animationTimeout) clearTimeout(animationTimeout);

                animationTimeout = setTimeout(function() {
                    $('.logo img').fadeOut(400, function () {
                         $('.logo img').attr('src', 'images/top-logo.png');
                         console.log('top');
                    }).fadeIn();
                },
                100);
            });
            isAtTop = true;
        }
     }
person Zac Braddy    schedule 01.03.2016
comment
Спасибо, только что попробовал, и изображение не мигает ни на одну прокрутку. Но теперь проблема в том, что изображение мигает всякий раз, когда вы прокручиваете. Есть ли способ предотвратить это исчезновение, если оно уже произошло один раз, пока вы снова не достигнете вершины? - person GeorgeGeorgitsis; 01.03.2016
comment
Я только что отредактировал код, чтобы включить флаг, который может решить эту проблему для вас? Дай мне знать. - person Zac Braddy; 01.03.2016