对改变背景的影响

Question

我有这个功能：

function changecolors() {
  x = 1;
  setInterval(change, 7000);
}

第二个功能就是这个：

function change() {
  if(x == 1) {
    document.getElementById('right').style.background='url(images/1.png)'
  }
}

如何对背景更改应用任何效果？

Answer 1

假设您在背景图像出现时正在寻找动画效果。

的 DEMO

<强> HTML：

<div id="right">
    <div id="right-bg"></div> // Note an extra div is being used to animate background using opacity of this div.
    <p>Hello!!</p>
</div>

<强> CSS：

#right {
    display: block;
    height: 50px;
    position: relative;
    width: 50px;
    Padding: 25px;
}
#right-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    -o-transition: opacity 0.35s ease-in-out;
    -ms-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
}

<强> JS：

function changecolors() {
    x = 1;
    setInterval(change, 7000);
}

function change() {
    if (x == 1) {
        document.getElementById('right-bg').style.background = 'url(http://placehold.it/100x100)';
        document.getElementById('right-bg').style.opacity = 1;
    }
}
changecolors();