提问者:小点点

淡出背景-简单Jquery


我对jquery非常陌生,并尝试删除元素的背景。我知道这可以简单地用javascript完成,但我希望它淡出,这就是为什么我产生了jquery。

到目前为止,我得到的是:

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

html标记只是:

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

我怀疑我没有正确地使用“fadeTo”功能,但环顾四周后,这是一个网站上提出的。jquery网站还启动了“fadeTo”函数的参数(延迟,函数)


共2个答案

匿名用户

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

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

例如,如果你想淡出整个网站,你可以这样做:

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

首先选择要在$('body')上执行此操作的对象。在这里阅读有关此的更多信息:jQuerySelectors其次,您对所选对象执行函数fadeTo。在这种情况下,第一个参数是退色应该持续多少毫秒,第二个参数是退色到什么不透明度。0是不可见的,1是完全可见的。0.5是可见/隐藏的一半。

从您显示的代码来看,您似乎还没有完全掌握jQuery的全部内容,因此我建议您多读一点这方面的内容。以下是几个好的起点:

  • 学习jQuery
  • jQuery
  • 代码学院jQuery

匿名用户

首先,您不能淡出html元素-这是整个网页。和fadeOut()fadeTo()不是使背景图像褪色的可靠方法。

相反,使用css转换。几乎与jQuery一样简单,但要多键入一点:

jsFiddle演示

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>