Javascript 动画HTML背景图像淡入淡出

我有一个网站，背景图像被拉伸以适应整个屏幕。单击会更改背景图像的缩略图。我试图在背景图像发生变化时实现交叉淡入过渡，但我似乎无法使其正常工作

现在，当点击拇指指甲时，整个屏幕（包括内容）淡出，然后以正确的背景图像淡入。我不想让内容淡出。。。我只是想让背景图像淡出。我想我的问题是，我告诉整个HTML页面淡出，但我不确定如何只针对整个网站的背景图像

CSS

JavaScript

$("#wrapper #thumbs figure img").click(function() {
    var id = $(this).attr('id');        
    $('html').fadeOut("slow", function() { });
    $('html').fadeIn("slow", function() {
        $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed');
    }); 
});

---

为此，不应将HTML元素作为目标，而应使用多个

div

s作为主体的整个大小。然后您可以指定

z-index

，以根据需要同时获得适当的堆叠和交叉淡入两个元素

---

我在这里举了一个例子。虽然这是一个快速滚动背景衰减的例子，但如果它适合您的使用情况，Avinash的答案可能会更好。

您尝试过使用吗？

您能详细介绍一下这项技术吗？我该如何处理这些

div

s？为您添加了一个使用背景色而不是图像的JSFIDLE。谢谢Jesse。您的代码不像Backstretch那样滞后，但我不知道如何使图像全屏显示并拉伸屏幕的整个宽度/高度。请尝试将两个

位置：绝对
语句切换到
位置：固定
。从未听说过Backstretch。让我看看：）这正是我需要它做的。谢谢：）不过我注意到。。。与IE/FF/Opera相比，它在Chrome/Safari中的表现非常缓慢。过渡不是那么顺利，但它完成了任务！如果你加一把小提琴就好了
$("#wrapper #thumbs figure img").click(function() {
    var id = $(this).attr('id');        
    $('html').fadeOut("slow", function() { });
    $('html').fadeIn("slow", function() {
        $('html').css('background', 'url(' + images[id] + ') no-repeat center fixed');
    }); 
});