单击时淡入更改背景图像

Question

我在这里找到的这个概念的所有例子并不能完全满足我的需要。

我从Here开始使用此代码。

$(document).ready(function() {
$("#amber").click(function() {
    $(".about-bg").css({'background-image':'url(images/amber.jpg)'}); 
})
});

这让我的背景图片交换没问题。但是，我想要有点花哨，让图像从一个淡入淡出到另一个。所以我把它改成了这个：

$(document).ready(function() {
$("#amber").click(function() {
    $(".about-bg").hide().css({'background-image':'url(images/amber.jpg)'}).fadeIn(500); 
})
});

然而，这会导致背景图像只是切换而我的内容会淡入。到目前为止我发现的选项似乎导致了相同的情况。

我想要的是什么，或者我需要查看旋转木马/滑块选项吗？

编辑：有人将此标记为已经回答，但发布的链接不适用于onclick事件，而且我在评论中读到的内容也会使图片内容淡化。也许我错了，因为有些东西我有时无法绕过我的脑袋。