Question

当我点击按钮

时，我有以下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>

Answer 1

在UpdateBackground - 功能：

中添加以下行

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

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

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

背景img与jquery之间的转换

1 个答案: