Question

当用户向下滚动页面时，我正在更换较小徽标的徽标。目前它是直接交换。但是我想添加一个漂亮的动画淡入/淡出，以便较大的徽标淡出，较小的徽标淡入，反之亦然。

这是我当前尝试的笔：http://codepen.io/abbasinho/pen/yyomrB

我试图添加fadeIn，但并不高兴。

JS：

$(function() {
    var logo = $(".lrg-logo");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
        } else {
            logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
        }

    });
});

CSS：

.wrapper {
  height: 2000px;
  position: relative;
  background: green;
}

header {
  position: fixed;
  width: 100%;
  height: 50px;
  background: grey;
}

.lrg-logo {
  width: 300px;
  height: 50px;
  text-align: center;
  background: red;
}

.sml-logo {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}

Answer 1

2件事：

徽标才能将其淡入。

淡出不应该发生在每个滚动事件上，但只有一次滚动顶部＆gt; 500

$(function() {
    var logo = $(".lrg-logo");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

    if (scroll >= 500) {
      if(!logo.hasClass("sml-logo")) {
        logo.hide();
        logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
      }
    } else {
      if(!logo.hasClass("lrg-logo")) {
        logo.hide();
        logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
      }
    }

  });
});

Answer 2

使用此

$(function() {
    var logo = $(".lrg-logo");
    var scrolling = false;
    var small = false;
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 500 && !scrolling && !small) {
            scrolling = true;
            logo.fadeOut(300);
            window.setTimeout(function() {
                logo.fadeIn( 300).removeClass('lrg-logo').addClass("sml-logo");
                scrolling = false;
                small = true;
            }, 300);

        } else if(!scrolling && small) {
            scrolling = true;
            logo.fadeOut( 300);
            window.setTimeout(function() {
                logo.fadeIn( 300).removeClass('sml-logo').addClass("lrg-logo");
                scrolling = false;
                small = false;
            }, 300);
        }

    });
});

我有两面旗帜。一个是看它目前的动画与否。另一个检查它是小还是大。

http://codepen.io/anon/pen/jEGNbN

代码位于上面的链接

在滚动上淡入另一个徽标

2 个答案: