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或更低版本），它就可以正常工作。

Answer 2

这一点，这可能会有所帮助 codepen link is here

var interval = setInterval(changePic,10);
var currentColor = [0,0,0];
function changePic(){
  $('#head').css({background: 'rgb(' + currentColor[0] + ',' + currentColor[1] + ',' + currentColor[2] + ')'});
  currentColor[0] = increaseColor(currentColor[0]);
  //currentColor[1] = increaseColor(currentColor[1]);
  currentColor[2] = increaseColor(currentColor[2]);

}
function increaseColor(colValue){
  colValue = (colValue > 255)? 0 : (colValue + 1);
  return colValue;
}

用JQuery改变背景

2 个答案: