Question

我对这一切都很陌生，但我已经能够将一个漂亮的网站整合在一起，但我有一个div，我想在10秒左右后改变背景。我希望图像之间的过渡更好，所以我希望div淡出，然后图像改变，然后让淡入淡出。所以，基本上，我将超时设置为10.5秒。开始时有0.5秒的淡入淡出，然后是9秒的显示时间，然后是0.5秒的淡出。然后超时应该再等待0.5秒，更改图像，然后重新开始。

代码首先工作，但大约10分钟后，淡入和淡出与超时功能不同步。我不知道为什么，这可能无关紧要（谁会坐下来盯着我的网站30分钟），但这让我很烦，所以我想我会问。这是代码，并提前感谢您！

$(function() {

var colorBackgrounds = new Array(
'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
);
var colorCurrent = 0;
var greyCurrent = 0;

function nextBackground() {
$('.bodyBackground').fadeIn(500);
$('.bodyBackground').delay(9000).fadeOut(500);
$('.bodyBackground').css({
    'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
    'background-position':'center center',
    'background-repeat':'no-repeat',
    'background-attachment':'fixed'
    });
setTimeout(nextBackground, 10500);
}

setTimeout(nextBackground, 10500);
$('.bodyBackground').fadeIn(500);
$('.bodyBackground').delay(9000).fadeOut(500)
$('.bodyBackground').css({
    'background':colorBackgrounds[0],
    'background-position':'center center',
    'background-repeat':'no-repeat',
    'background-attachment':'fixed'});
});

Answer 1

借调@mplungjan 自从＆＃34; fadeOut＆＃34;和＆＃34;淡出＆＃34;方法是异步的，除非你使用回调来强制执行你想要执行的顺序，否则你将会失序。如下所示：

var colorBackgrounds = new Array(
    'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
    'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
    'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
);

var colorCurrent = 0;
var greyCurrent = 0;

function nextBackground() {
  $('.bodyBackground').fadeIn(500, function(){
    $('.bodyBackground').delay(9000).fadeOut(500, function(){
      $('.bodyBackground').css({
        'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
        'background-position':'center center',
        'background-repeat':'no-repeat',
        'background-attachment':'fixed'
      });
      setTimeout(nextBackground, 10500);
    });
  });  
}


nextBackground();

Answer 2

$(function () {

    var colorBackgrounds = new Array(
            'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
            'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
            'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
            );
    var colorCurrent = 0;
    var greyCurrent = 0;

    function nextBackground() {
        $('.bodyBackground').fadeOut(500, function () {
            $('.bodyBackground').css({
                'background': colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
                'background-position': 'center center',
                'background-repeat': 'no-repeat',
                'background-attachment': 'fixed'
            });
            $('.bodyBackground').fadeIn(500, function () {
                setTimeout(nextBackground, 9000);
            });
        });
    }

    nextBackground();

});

FadeIn和FadeOut是异步方法。这意味着它们与主进程并行执行。

这里的解决方案是使用Callbacks。回调是在异步函数完成工作时调用的函数。

你可以看到我向你推荐一些不同的代码！而不是显示然后隐藏。它隐藏和显示。它的简化易于理解。

一段时间后JQuery延迟失去同步 - 替换背景图像

2 个答案: