Animate HTML背景图片淡入淡出

我有一个网站，其中的背景图像被拉伸到适合整个屏幕。有点击的拇指钉会改变背景图像。我试图在背景图像发生变化时获得交叉淡入淡出效果，但似乎无法使其发挥作用。Animate HTML背景图片淡入淡出

现在，当点击缩略图时，整个屏幕（包括内容）淡出，然后淡入正确的背景图像。我不希望内容淡出......我只想让背景图片淡出。我认为我的问题是我告诉整个HTML页面淡出，但我不确定如何定位整个网站的背景图像。

CSS

html { 
    background: url(../img/01.jpg) no-repeat center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

的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'); 
    }); 
});

来源

2012-05-07 Jon

这将是一件好事，如果你加一个小提琴 –

您是否试过使用Backstretch？

来源

2012-05-07 04:22:44

从来没有听说过Backstretch。让我看看:) – Jon

这正是我所需要做的。谢谢:) – Jon

虽然......我注意到它在IE/FF/Opera上比Chrome/Safari执行缓慢。转型并不顺利，但它完成了工作！ – Jon

你不应该针对这种情况的HTML元素，而不是使用多个div S中的身体的整体尺寸。然后，您可以指定z-index以根据需要一次获取适当的堆叠和交叉淡入淡出两个元素。

我已经提出了一个在jsFiddle开始的例子。虽然这是一个快速调整背景衰退的例子，但Avinash的答案可能会更好，只要它能适合您的用例。

来源

2012-05-07 04:14:02 Jesse

你可以详细说明这种技术？我会用这些'div'做什么？ – Jon

使用背景颜色而不是图片为您添加了jsFiddle。 – Jesse

谢谢Jesse。您的代码不会像Backstretch一样滞后，但我无法弄清楚如何将图像制作为全屏并拉伸整个屏幕的宽度/高度。 – Jon

Animate HTML背景图片淡入淡出

回答

相关问题