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

これはfadeIn-fadeOutソリューションです：

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

フェードアウトが終了すると、画像ソースが変更され、fadeInアニメーションを使用して表示されます。

于 2013-01-30T14:01:49.370 に答える