我对jquery非常陌生,并尝试删除元素的背景。我知道这可以简单地用javascript完成,但我希望它淡出,这就是为什么我产生了jquery。
到目前为止,我得到的是:
fadeTo(2000, function(){
document.html.style.background="black";
})
html标记只是:
<html style="background: url(back.png);background-size: cover;">
我怀疑我没有正确地使用“fadeTo”功能,但环顾四周后,这是一个网站上提出的。jquery网站还启动了“fadeTo”函数的参数(延迟,函数)
你必须调用jQuery函数fadeTo。现在,您正在调用一个可能不存在的fadeTo函数。
此外,fadeTo函数仅用于元素的不透明度。
例如,如果你想淡出整个网站,你可以这样做:
$('body').fadeTo(1000,0);
首先选择要在$('body')
上执行此操作的对象。在这里阅读有关此的更多信息:jQuerySelectors其次,您对所选对象执行函数fadeTo
。在这种情况下,第一个参数是退色应该持续多少毫秒,第二个参数是退色到什么不透明度。0是不可见的,1是完全可见的。0.5是可见/隐藏的一半。
从您显示的代码来看,您似乎还没有完全掌握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>