这是我的代码：http://codepen.io/RycerzPegaza/pen/YypZza
我无法弄清楚如何在按钮被按下时将fadeIn（）效果添加到更改的背景上（//在Javascript部分中为FADE IN EFFECT）。
/ 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>
/ CSS /
@import url(https://fonts.googleapis.com/css?family=Lato:700|Amatic+SC:700&subset=latin,latin-ext);
body{
background: url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed;
background-size: cover;
}
.row-fluid {
position: relative;
top: 200px;
}
p {
font-family: 'Amatic SC';
color: #DDDDDD;
font-size: 250%;
padding: 10px;
}
#qouteblock {
position: relative;
}
#background{
position: relative;
top: 170px;
background-color:rgba(0,0,0,0.45);
}
.container {
padding: 10px;
}
nav {
position: fixed;
bottom: 5%;
left: 46%;
font-family: 'Lato';
font-size: 18px !important;
}
/ 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;
};
我想尽可能少地更改代码。
//感谢您的建议：）
答案 0 :(得分：0)
fadeIn（）只会淡化所选元素，而不是任何已更改的css值。
一种解决方案是为每个背景设置一个fullsize元素。比你可以淡出新的背景和淡出旧的。
编辑：如何添加涵盖背景的元素
首先，CSS：
.bg-image {
position: fixed;
width: 100%;
height: 100%;
background-image: url(path/to/image.ext) center center no-repeat;
background-size: cover
}
固定的位置会使这个元素无法滚动。即使您滚动网站，此元素也将保留在屏幕上的相同位置。
现在将其添加为body-tag的子元素以及您的好处。当您想要更改背景图像时，您应该为新元素提供不同的类，您可以使用这些类通过css设置正确的图像，并通过javascript实现fadeIn，fadeOut ..