时间戳

首页 > 解决方案 > 在用户滚动时停止徽标图像闪烁

jquery - 在用户滚动时停止徽标图像闪烁

问题描述

我有两个不同的徽标，我想平滑地淡入和淡出它们，根据滚动条的位置在它们之间切换。使用我当前使用的代码，它会在图像之间切换并应用淡入淡出效果，但它会在用户不断滚动时继续这样做，从而产生闪烁效果。目前，我有以下代码：

$(window).on('scroll', function(){

     var headerHeight = $('header').outerHeight(true) / 3;    
     var scrollTop = $(this).scrollTop();
 
     if(scrollTop < headerHeight){

          $('.logo').fadeOut(200, function(){

               $('.logo').attr('src','IMG_URL01').fadeIn(200);

          });   

     }else if (scrollTop > headerHeight){

          $('.logo').fadeOut(200, function(){
              $('.logo').attr('src','IMG_URL02').fadeIn(200);
         
          });
};

基于代码的结构，我可以看出为什么它会产生闪烁效果；每次用户滚动时都会应用 if 语句，具体取决于滚动条的位置。但是，我只是不知道该写什么以及在哪里写它以仅应用 if 语句一次。

标签： jqueryif-statementscrollfadeinfadeout

解决方案

如果在每个进程执行时设置一个布尔标志，以便布尔值在执行之前必须为假并在执行时变为真，那么您也可以在 if 语句中检查这一点，强制它在滚动范围内仅触发一次.

每个进程都会重置另一个进程的布尔值，因此当用户再次返回该滚动范围时，可以再次启动另一个进程。

var img1IsFadedIn = false;
var img2IsFadedIn = false;

$(window).on('scroll', function(){

    var headerHeight = $('header').outerHeight(true) / 3;    
    var scrollTop = $(this).scrollTop();

    if(scrollTop < headerHeight && img1IsFadedIn == false){
        img1IsFadedIn = true;
        img2IsFadedIn = false;
        $('.logo').fadeOut(200, function(){
            $('.logo').attr('src','IMG_URL01').fadeIn(200);
        });   

    }else if (scrollTop > headerHeight && img2IsFadedIn == false){
        img2IsFadedIn = true;
        img1IsFadedIn = false;
        $('.logo').fadeOut(200, function(){
            $('.logo').attr('src','IMG_URL02').fadeIn(200);
        });
    }

});

推荐阅读