Question

我有以下代码：

$(document).ready(function() {

    var bgCounter = 0,
        backgrounds = [
           "images/2.png",
           "images/1.png",
           "images/3.png"
        ];

    function changeBackground()
    {
        bgCounter = (bgCounter+1) % backgrounds.length;
        $('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');
        setTimeout(changeBackground,100000);
    }

    changeBackground();
    });

我需要在背景更改之间添加淡入/淡出效果。有什么指导吗？

Answer 1

试试这个：

 $(document).ready(function() {
 var bgCounter = 0,
    backgrounds = [
       "images/2.png",
       "images/1.png",
       "images/3.png"
    ];

 function changeBackground()
 {
    bgCounter = (bgCounter+1) % backgrounds.length;
      $('#page').animate({
     opacity: 0
    }, 0).css({
          'background-image': 'url('+backgrounds[bgCounter]+')'
     }).animate({opacity: 1}, 1000);

 setTimeout(changeBackground,10000);
 }

 changeBackground();
 });

演示：http://jsfiddle.net/nq7uE/8/

Answer 2

只需添加：

$('#page').fadeIn()

前

$('#page').css('background', '#000 url('+backgrounds[bgCounter]+') no-repeat');

而且：

$('#page').fadeOut()

之后..

使用jquery添加背景的淡入淡出效果更改

2 个答案: