淡出背景图像到另一个背景图像

Question

很抱歉，如果这似乎是Stack上类似问题的重复。
我发现很多关于褪色背景图像的问题，或者用徘徊改变它们的问题，但这并不完全符合我的需要。我只是想使它看起来像loading.gif（设置为background-image）正逐渐消失。

我已尝试使用此Stack Question here中的代码和建议。

我已经制作了一个JSFiddle来处理我的代码，但由于我不是一个专业的开发人员，我的jQuery经验和知识充其量是正常的，我无法让它工作。

< p> 任何有关这方面的帮助将不胜感激。 JS Fidde：https://jsfiddle.net/tsruxyan/1/

Answer 1

我真的不明白你想做什么以及如何改变背景或其他任何东西你可以通过jQuery $(elemnt).addClass为你的元素添加一个类然后在其中使用动画＆＃39; s css代码，最后删除回调函数中的类。

Answer 2

问题是你没有在你的JsFiddle中包含jQuery作为外部Ressource。这就是为什么你不能在其中调用jQuery函数的原因。

我不确定你想要实现什么，但是如果你添加jQuery，你可以简单地添加另一个（隐藏的）背景，使用.fadeOut()淡出第一个背景，然后显示第二个第一个动画完成后，使用.toggle()显示其他背景的背景图像。

这可能是这样的：

$( "#clickme" ).click(function() {


  $( ".library-layout" ).fadeOut( "slow", function() {

    //Fade out ready, time to fade in the other image
    $( "#other-img" ).toggle( "slow", function() {
    // Animation complete.
        });
  });
});

概念证明是here。