Question

我非常 jquery的新手，并尝试删除元素的背景。我知道这可以简单地用javascript完成，但是我想让它淡出，这就是为什么我会导致jquery。

到目前为止，我得到的是：

fadeTo(2000, function(){
    document.html.style.background="black";
})

html标签只是：

<html style="background: url(back.png);background-size: cover;">

我怀疑我没有使用＆＃34; fadeTo＆＃34;功能正常，但环顾四周网站提出的建议。 jquery网站还启动了＆＃34; fadeTo＆＃34;的参数。功能是（延迟，功能）

Answer 1

你必须调用jQuery函数fadeTo。现在你正在调用一个可能不存在的fadeTo函数。

此外，fadeTo函数仅用于元素的不透明度。

例如，如果您希望淡出整个网站，您可以执行以下操作：

$('body').fadeTo(1000,0);

首先，您在$('body')上选择要执行此操作的对象。在这里阅读更多相关信息：jQuery Selectors 其次，在您选择的对象上执行函数fadeTo。在这种情况下，第一个参数是衰落应持续多少毫秒，第二个参数是淡入淡出的不透明度。 0是不可见的，1是完全可见的。 0.5将是半途可见/隐藏。

从你显示的代码中，你似乎并没有完全掌握jQuery的内容，所以我建议你多做一些关于这个主题的阅读。这里有几个好的开始：

Answer 2

首先，你不能淡出html元素 - 这就是整个网页。并且fadeOut()或fadeTo()不是淡化背景图片的可靠方法。

相反，使用css过渡。几乎和jQuery一样简单，但输入更多：

jsFiddle Demo

setTimeout(function(){
  $('#html').css('background-image','url(http://placeimg.com/500/500/nature)');
},2000);

#html{
	background: url(http://placeimg.com/500/500/animals);background-size: cover;
	/* TRANSITION */
	-webkit-transition: background-image 3s;
	-moz-transition: background-image 3s;
	-o-transition: background-image 3s;
	transition: background-image 3s;
}
#inner{width:100%;height:100vh;background:transparent;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="html">
  <div id="inner">
    Simulated page content
  </div>
</div>

注意：

（1）示例仅使用带有id="html" 的DIV，因为 这些演示环境不允许我们使用html标记。

（2）由于某种原因，转换开始时会出现眨眼。也许这是演示环境的副作用。否则，也许会问一个新问题，有人可以帮助理解为什么/如何删除。

（3）jQuery没有任何问题 - many great reasons to use it over vanilla js

（4）来源：

CSS3 background image transition

http://api.jquery.com/fadeout/

淡出背景 - 简单的Jquery

2 个答案: