淡入淡出，稍后使用jQuery更改背景

我一直在搜索，似乎不可能用jQuery设置背景动画

然后我尝试淡出，用css更改，然后淡入。我不明白为什么它不遵循这个顺序，css会先改变。我怎样才能按照我提到的顺序来做呢

（我将一个div放在另一个div的上面，并使整个div褪色，这具有类似的效果。但在实际情况中，由于不同的原因，该选项有一些缺点）

$（“#boto”）。单击（函数（）{
$（'#boto'）。淡出（1000）
.css（'background-image'，'url(https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png)')
.fadeIn（1000）；
});
#boto{
位置：绝对位置；
顶部：10px；左侧：10px；
宽度：300px；高度：300px；
背景图像：url（'https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png');
背景重复：无重复；
背景位置：中心；
背景色：白烟；
光标：指针；
}

您可以尝试以下方法：

$('#boto').fadeOut(1000).animate({
    backgroundImage: 'url(https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png),
    display: 'block'
}, 1000);

您必须等待淡出完成，这应该通过向函数调用传递第二个参数来完成，如下所示：


$（“#boto”）。单击（函数（）{
$（this）.fadeOut（1000，function（）{
$（this.css（'background-image'，'url(https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png)')
.fadeIn（1000）；
});
});
#boto{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：300px；
高度：300px；
背景图像：url（'https://www.w3.org/html/logo/downloads/HTML5_Badge_256.png');
背景重复：无重复；
背景位置：中心；
背景色：白烟；
光标：指针；
}

请小心，因为如果用户没有缓存图像，它可能会有一点问题，因为图像将开始淡入并同时加载。您的选择很好，谢谢！。但我仍然不明白为什么我的第一枪不起作用，它有什么问题？它没有什么问题，但它没有像你认为的那样起作用。淡出函数以同步方式运行，因此脚本不会等到动画完成后才运行下一个函数调用，并在淡出开始后运行下一步（更改背景）。这就是为什么需要回调，以便仅在动画完成后运行代码，这是在内部完成的。为什么链接与.slideUp（）.slideDown（）、fadeIn（）.fadeOut（）、delay（）一起工作。。。css背景有什么不同？