Jquery 将随机背景fadeIn（）添加到当前背景上_Jquery_Css

Jquery 将随机背景fadeIn（）添加到当前背景上

jquery css

Jquery 将随机背景fadeIn（）添加到当前背景上,jquery,css,Jquery,Css,这是我的密码：当点击按钮时，我不知道如何将fadeIn（）效果添加到不断变化的背景上（//Javascript部分中的淡入效果） /HTML/ <body onload="randomquote(); randomcover()"> <div class="container text-center"><div id="background" > <div id="qouteblock"><p id="content">

这是我的密码：

当点击按钮时，我不知道如何将fadeIn（）效果添加到不断变化的背景上（//Javascript部分中的淡入效果）

/HTML/

  <body onload="randomquote(); randomcover()">
  <div class="container text-center"><div id="background" >
    <div id="qouteblock"><p id="content"></p></div></div>
<div class="row-fluid"><nav>
  <ul class="pager">
    <li onclick="randomquote()">
      <button type="button" class="btn btn-default"> a new qoute</button>
    </li>
  </ul></nav>
    </div></div>
</body>

/JAVASCRIPT/

// RANDOM BACKGROUND

randomcover = function(){
var covers = [];
covers[0] = " #222 url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed";
covers[1] = " #222 url('https://farm6.staticflickr.com/5255/5419581943_5826526eb4_o.jpg') no-repeat center center fixed";
covers[2] = " #222 url('http://www.splitshire.com/wp-content/uploads/2015/09/SplitShire-6272.jpg') no-repeat center center fixed"
 // FADEIN EFFECT 
  $("li").click(function() {
   var aCover = covers[Math.floor(Math.random()*covers.length)];
  $currImg = $("body").css({background:aCover}).fadeIn();
  });
};
// QUOTE MACHINE
randomquote = function() {
  var quotesArray = [];
quotesArray[0] = "One day I will find the right words, and they will be simple. <br> ― Jack Kerouac, The Dharma Bums";
quotesArray[1] = "Live, travel, adventure, bless, and don't be sorry. <br> ― Jack Kerouac";
quotesArray[2] = "My fault, my failure, is not in the passions I have, but in my lack of control of them. <br> ― Jack Kerouac";
quotesArray[3] = "the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars. <br> ― Jack Kerouac";
quotesArray[4] = "The only truth is music. <br> ― Jack Kerouac";
quotesArray[5] = "The best teacher is experience and not through someone's distorted point of view. <br> ― Jack Kerouac";
quotesArray[6] = "Great things are not accomplished by those who yield to trends and fads and popular opinion. <br> ― Jack Kerouac"; 
quotesArray[7] = "Don't use the phone. People are never ready to answer it. Use poetry. <br> ― Jack Kerouac";
quotesArray[8] = "Will you love me in December as you do in May?<br> ― Jack Kerouac";
quotesArray[9] = "My witness is the empty sky. <br> ― Jack Kerouac";
quotesArray[10] = "Maybe that's what life is... a wink of the eye and winking stars. <br> - Jack Kerouac";
quotesArray[11] = "All human beings are also dream beings. Dreaming ties all mankind together. <br> - Jack Kerouac";
quotesArray[12] = "Forgive everyone for your own sins and be sure to tell them you love them which you do. <br> - Jack Kerouac";
  quotesArray[13] = "Because in the end, you won’t remember the time you spent working in the office or moving your lawn. Climb that goddamn mountain. <br> - Jack Kerouac";
  quotesArray[14] = "So therefore I dedicate myself, to my art, my sleep, my dreams, my labours, my suffrances, my loneliness, my unique madness, my endless absorption and hunger because I cannot dedicate myself to any fellow being. <br> - Jack Kerouac";
  quotesArray[15] = "Never Say a Commonplace Thing. <br> - Jack Kerouac";
  var newquote = quotesArray[Math.floor((Math.random()*15))];
  document.getElementById('content').innerHTML = newquote;
};

//随机背景
randomcover=函数（）{
var覆盖率=[]；
封面[0]=“#222 url（'http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original'）无重复中心固定”；
封面[1]=“#222 url（'https://farm6.staticflickr.com/5255/5419581943_5826526eb4_o.jpg“）无重复中心固定”；
封面[2]=“#222 url（'http://www.splitshire.com/wp-content/uploads/2015/09/SplitShire-6272.jpg“）无重复中心固定”
//法登效应
$（“li”）。单击（函数（）{
var aCover=covers[Math.floor（Math.random（）*covers.length）]；
$currImg=$（“body”）.css（{background:aCover}）.fadeIn（）；
});
};
//报价机
randomquote=函数（）{
var quotesArray=[]；
quotesArray[0]=“总有一天我会找到正确的词语，它们会很简单。
杰克·凯鲁亚克，达摩流浪汉”；
quotesArray[1]=“生活，旅行，冒险，祝福，别难过。
―杰克·凯鲁亚克”；
quotesArray[2]=“我的错，我的失败，不在于我的激情，而在于我无法控制它们。”；
quotesArray[3]=“对我来说，唯一的人是疯子，那些疯狂地活着，疯狂地说话，疯狂地被拯救，同时渴望一切的人，那些从不打哈欠或说一句平常的话，而是燃烧，燃烧，燃烧，像神话般的罗马黄蜡烛，像蜘蛛一样在星空中爆炸。”；
quotesArray[4]=“唯一的真理是音乐。
杰克·凯鲁亚克”；
quotesArray[5]=“最好的老师是经验，而不是通过别人扭曲的观点。”；
quotesArray[6]=“屈服于潮流、时尚和流行观点的人不会成就大事。
杰克·凯鲁亚克”；
quotesArray[7]=“不要用电话。人们从来没有准备好接电话。用诗歌。
杰克·凯鲁亚克”；
quotesArray[8]=“12月你会像5月那样爱我吗？
杰克·凯鲁亚克”；
quotesArray[9]=“我的证人是空空的天空。
杰克·凯鲁亚克”；
quotesArray[10]=“也许这就是生活……眨眼和眨眼的星星。”；
quotesArray[11]=“所有的人都是梦中人。梦把所有的人联系在一起。
-杰克·凯鲁亚克”；
quotesArray[12]=“原谅每个人自己的罪，一定要告诉他们你爱他们，就像你爱他们一样。”；
quotesArray[13]=“因为最终，你不会记得你在办公室工作或移动草坪的时间。爬上那座该死的山。
-Jack Kerouac”；
quotesArray[14]=“因此，我献身于我的艺术、我的睡眠、我的梦想、我的劳动、我的选举权、我的孤独、我独特的疯狂、我无尽的专注和饥饿，因为我无法献身于任何一个人。”；
quotesArray[15]=“永远不要说平庸的话。
-Jack Kerouac”；
var newquote=quotesArray[Math.floor（（Math.random（）*15））；
document.getElementById（'content'）。innerHTML=newquote；
};

我希望尽可能少地更改代码

//感谢您的建议：）

fadeIn（）只会在所选元素中淡出，而不会更改任何css值

一种解决方案是为每个背景都有一个完整大小的元素。你可以淡入新的背景，淡出旧的

编辑：如何添加覆盖背景的元素

首先，CSS：

.bg-image {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(path/to/image.ext) center center no-repeat;
  background-size: cover
}

位置固定将使该元素无法滚动。即使您滚动站点，该元素也将保持在屏幕上的相同位置

现在将其添加为body标签的子元素，并添加good to go。当你想要改变背景图像时，你应该给新元素不同的类，你可以使用它通过css设置正确的图像，通过javascript设置fadeIn，fadeOut

完整示例（使用js）：

以这种方式是不可能的。没有像背景不透明度这样的属性，因此您必须使整个元素褪色。当然，这对身体本身不起作用。那我该怎么办呢？如何将背景属性添加到body元素以外的任何其他元素中，使其覆盖站点并允许我对其进行操作？首先，不要将div彼此包裹在一起。第二：当你想设置背景图像及其位置，重复等，你必须使用背景：。。。而不是背景图像：。。。见：

.bg-image {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(path/to/image.ext) center center no-repeat;
  background-size: cover
}