javascript - 使用javascript减慢背景变化持续时间

Question

我能够让我的网站标题在一段时间后更改它的背景，但它在闪烁时看起来不太好。

Here是网站。无论如何改变行动的持续时间？我试图用 css 动画来完成它，但事实证明“背景:”对于某些浏览器来说不会像 “background-color:” 属性那样工作。无论如何，这是我的代码，你能给我一些建议吗？谢谢!

$(document).ready(function(){
var header = $('.header');

var backgrounds = new Array(
    'url("wp-content/themes/the-best-of-the-old-school/pics/header-bg.jpg")', 'url("wp-content/themes/the-best-of-the-old-school/pics/fire-bg.jpg")'
);

var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background', backgrounds[current]);
}

setInterval(nextBackground, 5000);

header.css('background', backgrounds[0]);

});

Answer 1

您可以使用 jQuery Animate

替换这行代码

header.css('background', backgrounds[current]);

随着以下内容

header.animate({opacity: 0}, 'slow', function() {
    $(this)
        .css({'background-image': backgrounds[current]})
        .animate({opacity: 1});
});

查看答案 here和 here