背景图像与 jquery 之间的转换答案

【问题标题】：Transition between background img with jquery背景图像与 jquery 之间的转换
【发布时间】：2017-02-17 12:44:11
【问题描述】：

当我点击按钮时，我有以下 JS 在我的网站上更改背景

我想为这两个背景之间的过渡设置动画。我该怎么做？

var ImageOne = true;
var UrlOne = "https://s24.postimg.org/itrww7ovp/capanaraeditada.png";
var UrlTwo = "https://s27.postimg.org/wylbf2t83/capanara.jpg";

function SwitchImage() {
  if (ImageOne) {
    ImageOne = false;
    UpdateBackground(UrlTwo);

  } else {
    ImageOne = true;
    UpdateBackground(UrlOne);

  }
}


function UpdateBackground(Url) {
  $("body").css("background", "url(" + Url + ") no-repeat center center scroll");
  $("body").css("-webkit-background-size", "cover");
  $("body").css("-moz-background-size", "cover");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="SwitchImage();">LUZ</button>

【问题讨论】：

标签： jquery html background jquery-animate transition

【解决方案1】：

在您的UpdateBackground-Funtion 中添加以下行：

$("body").css("transition", "background 1s");

CSS 属性transition 定义了更改其他 CSS 属性之间应经过的时间。 background 在 1s 前面，你说，这一秒应该只应用于背景属性。

这只是冰山一角，你可以做很酷的事情。查看this 链接了解更多信息和完整语法。

【讨论】：