fadeOut，addClass到background然后fadeIn

Question

我正在尝试添加淡入和淡出效果以更改主要内容下固定的div的背景，因此当用户单击某些内容的按钮时，背景会随之改变：

我尝试添加CSS转换，但Firefox似乎不支持它们进行背景更改。

然后我尝试了这段代码，但没有做出我需要的东西。我想我错过了一些东西，你能建议一个更好的序列，这样背景会变得柔和吗？我也尝试使用delay(1000)，但再一次，未能淡化改变的背景。

有什么问题？在点击之后，在fadeOut之前，图像的变化就会发生。

jQuery('.button').click(function() {
    jQuery('#home-wrapper').fadeOut(999);
    jQuery('#home-wrapper').removeClass('default_background');
    jQuery('#home-wrapper').addClass('filter_music').fadeIn(999);
});

Answer 1

您需要使用fadeOut的回调参数，以便在动画结束后更改类。试试这个：

jQuery(function($) {
    $('.button').click(function() {
        $('#home-wrapper').fadeOut(999, function() {
            $(this).removeClass('default_background').addClass('filter_music').fadeIn(999);
        });
    });
});