如何在JavaScript中结合addClass与fadeIn/fadeOut实现背景渐变切换？

原生jQuery的addClass()和removeClass()方法不支持第二个时长参数，你写的addClass('first', 400)这种写法是jQuery UI扩展的功能，如果没引入jQuery UI，这段代码自然不会生效。下面提供几种可行的解决方案：

方案1：引入jQuery UI实现带动画的类切换 #

如果要保留用addClass/removeClass加动画的写法，需要先引入jQuery UI库，之后可以简化代码：

$(document).ready(function () {
    $('#1st, #2nd').hover(function() {
        const targetClass = $(this).attr('id') === '1st' ? 'first' : 'second';
        const removeClass = targetClass === 'first' ? 'second' : 'first';
        $('#BG').stop(true, true).addClass(targetClass, 400).removeClass(removeClass, 400);
    });
});

方案2：用CSS过渡实现（推荐，无需额外库） #

这种方式性能更优，不需要依赖jQuery UI，仅通过CSS过渡属性配合类切换即可实现淡入淡出效果：

CSS代码 #

#BG {
    transition: background 0.4s ease; /* 0.4s对应你需要的400ms动画时长 */
    /* 这里设置初始背景样式 */
}
#BG.first {
    background: /* 第一个背景的样式（颜色/图片等） */;
}
#BG.second {
    background: /* 第二个背景的样式（颜色/图片等） */;
}

JS代码（复用你最初的类切换逻辑即可） #

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').addClass('first').removeClass('second');
    });
    $('#2nd').hover(function () {
        $('#BG').addClass('second').removeClass('first');
    });
});

类切换时，CSS会自动处理背景的平滑过渡，完全不需要JS控制动画。

方案3：结合fadeIn/fadeOut实现 #

如果一定要用fadeIn/fadeOut，可以给#BG内部嵌套两个不同背景的子元素，通过控制子元素的显隐动画实现切换：

HTML结构 #

<div id="BG">
    <div class="bg-first"></div>
    <div class="bg-second"></div>
</div>

CSS代码 #

#BG {
    position: relative;
    width: /* 设置容器宽度 */;
    height: /* 设置容器高度 */;
}
#BG > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.bg-first {
    background: /* 第一个背景样式 */;
}
.bg-second {
    background: /* 第二个背景样式 */;
}

JS代码 #

$(document).ready(function () {
    // 初始化显示第一个背景
    $('#BG .bg-first').show();
    
    $('#1st').hover(function () {
        $('#BG .bg-second').stop(true, true).fadeOut(400);
        $('#BG .bg-first').stop(true, true).fadeIn(400);
    });
    $('#2nd').hover(function () {
        $('#BG .bg-first').stop(true, true).fadeOut(400);
        $('#BG .bg-second').stop(true, true).fadeIn(400);
    });
});

内容的提问来源于stack exchange，提问作者Freddan