Javascript 背景淡入无法正常工作

不确定这是否可行，但我正在尝试向jquery css更改中添加淡入。我也尝试过使用css转换属性，但没有效果

这是我已经走了多远，但它不起作用

HTML:

jQuery：

$( "li[data-pid='1'] img" ).click(function() {
    $( "#primary .bcg" ).fadeIn( "slow", function() {
        $(this).css( "background", "url(http://ericbrockmanwebsites.com/dev7/wp-content/themes/AntCas/player-images/bgs/Titanic-bg.jpg) no-repeat fixed center center / cover  rgba(0, 0, 0, 0)");
    });
});

---

有什么洞察吗？

您不能在2个

背景图像之间设置
转换

您需要将它们放在不同的容器中，然后可以使用
不透明度
和
z-index
褪色，例如：
这里有一个例子：

基础是

body:before, body:after {
  content:'';
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  z-index:1;
    background-size: cover;
  animation:bgfade 10s infinite;
  animation-direction: alternate;
  opacity:1;
}

使用身体背景，您可以淡入/淡出3个不同的图像。通过js、jQuery或CSS。
“任何见解”都太宽泛了。您可能需要读取。在“慢速”fadeIn之后，可能会执行重复的回调函数。所以本质上这将是一个非常即时的变化。谢谢@Morklympious并原谅我的无知，一边学习js。你的意思是我应该先修改css，然后在其中嵌套fadeIn吗？谢谢你想在背景音乐中消失吗？请添加一些html。谢谢，这是很好的信息。我会尝试一下，如果可行的话，我会接受的。
$( "li[data-pid='1'] img" ).click(function() {
    $( "#primary .bcg" ).fadeIn( "slow", function() {
        $(this).css( "background", "url(http://ericbrockmanwebsites.com/dev7/wp-content/themes/AntCas/player-images/bgs/Titanic-bg.jpg) no-repeat fixed center center / cover  rgba(0, 0, 0, 0)");
    });
});

body:before, body:after {
  content:'';
  top:0;
  left:0;
  bottom:0;
  right:0;
  position:absolute;
  z-index:1;
    background-size: cover;
  animation:bgfade 10s infinite;
  animation-direction: alternate;
  opacity:1;
}