Jquery 在附加类之后，使标题淡出然后进入

我有一个小脚本，它允许我的头在滚动页面时附加和删除一个子类

然而，转换是困难的，我想让标题变体从一个渐变到另一个

我想不出怎么让它褪色。它要么来回闪烁，要么闪烁然后消失。我想知道是否有人能帮我

我拥有的jquery代码如下（处于断开状态）

我希望头淡出，附加.small类，然后淡入

反之亦然

---

我希望我的问题有意义。

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

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

变成：

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

---

或者，您可以在css中为附加的类使用动画变换

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

$(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);
            }
        }
    });
});

$（文档）.ready（函数（）{
/*
navOffset—触发事件的距离
scrollPos—页面已滚动的位置Y
*/
var navOffset=5/*$（“标题”）.offset（）.top*/
$（窗口）。滚动（函数（）{
var scrollPos=$（window.scrollTop（）；
$（“标题”）.stop（true）；
if（！$（“标题”）.hasClass（“较小”）| | scrollPos导航偏移）{
$（“header”）.fadeTo（400,0，function（）{
$（“标题”）.addClass（“较小”）；
});
$（“页眉”）.fadeTo（400,1）；
}否则{
$（“标题”）.fadeTo（400，0，函数（）{
$（“标题”）.removeClass（“较小”）；
});
$（“页眉”）.fadeTo（400,1）；
}
}
});
});

$(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);
            }
        }
    });
});