1

是否可以在更改背景中添加动画。我试过这样的CSS3财产transition background and background-image：

var affected_element = $('body');
affected_element.css('min-height', '100%');
affected_element.css('min-width', '100%');
affected_element.css('background-size', 'cover');

affected_element.css('transition', 'background 1s');
affected_element.css('-moz-transition', 'background 1s');
affected_element.css('-webkit-transition', 'background 1s');
affected_element.css('-o-transition', 'background 1s');

var config = $('.fullscreen_src');

affected_element.css('background-image', "url('" + config[0].src + "')");
imageIndex = 1,
setInterval(function(){ affected_element.css('background-image', "url('" + config[imageIndex++ % config.length].src + "')" ) }, 3000);

但我没有看到过渡正在产生任何影响？我做错了什么还是有更简单的方法可以做到这一点？

4

2 回答 2

1

你可以使用这个插件：http ://www.buildinternet.com/project/supersized/

您需要做的是拥有普通图像并获取内容背后的图像（z-index 和内容等不包括在我的示例中）：

html:

<body>
  <div id="background">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
  </div>
</body>

CSS：

html,body
{
  height: 100%;
  width: 100%;
}
body
{
  position: relative;
}
#container, #container img
{
  position: absolute;
  top: 0px; 
  left: 0px;
  width: 100%; 
  height: 100%;
}
#container img + img
{
  display: none;
}

如果你想从 image1 切换到 image2：

$('#background img:eq(1)').fadeIn().siblings().fadeOut();

作为一般的 jQuery 提示：您可以链接方法：

var affected_element = $('body');
affected_element.css('min-height', '100%')
  .css('min-width', '100%')
  .css('background-size', 'cover');

或者更好（使用动画或 css（以及许多其他功能）时）：

var affected_element = $('body');
affected_element.css({
  'min-height': '100%'
  'min-width': '100%',
  'background-size': 'cover'
});
于 2013-01-30T14:50:57.987 回答
0

这是一个淡入淡出的解决方案：

var affected_element = $('body');
affected_element.fadeOut(3000);
affected_element.promise.done(function(){
  $(this).css('background-image',newSource).fadeIn(3000);
});

当淡出完成后，图像源会发生变化并使用淡入动画显示。

于 2013-01-30T14:01:49.370 回答