javascript - 使用 JQuery 更改背景

Question

我使用此 JQuery 代码在五秒后更改背景，如何使背景淡入淡出/动画，而不是立即更改？

    <script>
    $(function () {
    var body = $('header');
    var backgrounds = [
      'url(<?php bloginfo('template_url') ?>/img/header-boy.jpg)',
      'url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)'];
    var current = 0;

    function nextBackground() {
        body.css(
            'background',
        backgrounds[current = ++current % backgrounds.length]);

        setTimeout(nextBackground, 5000);
    }
    setTimeout(nextBackground, 5000);
    body.css('background', backgrounds[0]);
});
    </script>

Answer 1

您还可以使用 CSS 过渡，使用起来非常简单:

body {
   background-color: white;
   transition: background-color 1s 5s ease;
}

body.new-background-color {
   background-color: black;
}

现在在 JavaScript 中，只需在 body 元素上使用 Add class 即可添加类:

jQuery('body').addClass('new-background-color');

我还没有对此进行测试，但只要您不需要它与旧版魔鬼浏览器(IE8 或更低版本)一起使用，它应该可以正常工作。