在附加 class 之后让 header 淡出然后出现

Question

我有一个小脚本，允许我的 header 在滚动页面时添加和删除子class。

但是，过渡很困难，我希望 header 变体从一个变体淡入另一个变体。

我不知道如何让它褪色。它要么闪烁，要么闪烁然后消失。我想知道是否有人可以帮助我。

我的 jquery 代码如下（处于损坏状态）

function init() {
window.addEventListener('scroll', function(e){
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("#header");
    if (distanceY > shrinkOn) {
        $("header").addClass("smaller").fadeIn(400);
    } else {
        if ($("header").hasClass("smaller")) {
            $("header").fadeOut(400).removeClass("smaller").fadeIn(400);
     }
    }
});
}
window.onload = init();

我希望 header 淡出，附加 .smaller class，然后淡入。

和vise-versa.

我希望我的问题有道理。

Answer 1

如果您在淡入淡出功能完成时添加或删除，那么：

 $("header").addClass("smaller").fadeIn(400);

变成：

 $("header").fadeIn(400, function(){
   $(this).addClass("smaller");
 });

或者，您可以在 css 中为附加的类

使用动画变换

Answer 2

我能够弄清楚，但这产生了一个新问题，稍后将发布。以下是我的解决方案：

$(document).ready(function() {
    /*
        navOffset - The distance in which to trigger the events
        scrollPos - The position Y that the page has been scrolled
    */

  var navOffset = 5 /*$("header").offset().top;*/

    $(window).scroll(function(){
    var scrollPos = $(window).scrollTop();
    $("header").stop(true);

        if (!$("header").hasClass("smaller") || scrollPos < navOffset) {
            if (scrollPos > navOffset) {
                $("header").fadeTo(400, 0, function() {
                    $("header").addClass("smaller");
                });
                $("header").fadeTo(400, 1); 
            } else {
                $("header").fadeTo(400, 0, function (){
                    $("header").removeClass("smaller");
                });
                $("header").fadeTo(400, 1);
            }
        }
    });
});

在附加 class 之后让 header 淡出然后出现

Have header fade out then in after appending class

jquery

css

header

fade