Question

我在使用这段代码时遇到了一些麻烦。我想要做的是为背景之间的过渡设置动画。我尝试过使用fadeIn（）＆amp; fadeOut（）但我不知道在哪里放这些。一点帮助将非常受欢迎：）。

这是我目前的代码：

jQuery(window).load(function(){
var images = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png',];
var i = 0;

var quotes = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png',];


setInterval(function(){

    jQuery('body').css('background-image', function() {
        if (i >= images.length){
            i=0;
        }
        return 'url(' + images[i++] + ')'; 

    }).fadeIn() ;

    var random = Math.floor(Math.random()*5)
    var disquote = quotes[random]
    $('#qtext').html(disquote);


}, 5000);
})

Answer 1

您无法淡出背景图片

你可能会这样做的方法是让一个完整的元素覆盖身体，比你设置图像到身体和DIV使DIV褪色：

LIVE DEMO

<body>
  <div id="bg"></div>  
  <h1 id="qtext"></h1>
</body

CSS：

body, #bg{
  background: none no-repeat center center fixed;
  background-size:cover;
}
#bg{
  position:absolute;
  width:100%;
  height:100%;
}

JS / JQ：

jQuery(function( $ ){

  var images = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png'],
      quotes = ['Wowingly','Smooth','Something','Some quote'],
      tempR = 0,
      n = images.length,
      $bo = $('body'),
      $bg = $('#bg'),
      $qt = $('#qtext');


  for(var i=0; i<n; i++){
    var img = new Image().src = images[i];
  }

  function fader(){
    var r = Math.floor(Math.random()*n);
    $qt.html(quotes[r]);
    $bg.fadeTo(0,1).css({ backgroundImage: "url("+ images[tempR]+ ")" }).fadeTo(400,0);
    $bo.css({ backgroundImage: "url("+ images[r]+ ")" });
    tempR = r;
  }
  fader();

  setInterval(fader, 2000);

});

Answer 2

我同意Roko的意见，因为你不能像你想要的那样淡化背景图像。但是你仍然可以做一个简单的fadeIn（）和fadeOut（）。

您只需在fadeOut（）完成后再进行图像更改，然后再淡入淡出。

正如Roko所说，你应该使用一个单独的div拉伸到你的背景来模拟被改变的身体背景。

这是您查看HERE

的小提琴

var images = ['red','blue','green','purple','yellow'];
var quotes = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png'];

setInterval(function(){

var random = Math.floor(Math.random()*5);
var disquote = quotes[random];
var bg = $.inArray(disquote, quotes);

$(".bodyBG").fadeOut("fast",
     function () {
        $('#qtext').html(disquote);
        $(this).css('background-color', images[bg] );
        // Animation complete.
        $(this).fadeIn("fast");
    });
}, 1000);

我注意到你的引用是随机生成的，所以在我的例子中我还生成了与你显示的当前引用相关的背景。

目前我已经更改了背景颜色，但您可以进行微调，以便使用css属性“background-image”进行调整。

使用jQuery，数组和放大器动画背景幻灯片。计时器

2 个答案: