试图优化我的背景变化，并试图让它们淡入

Question

刚刚完成了我的FCC挑战的天气预报页面。但是，我不喜欢交换我的 bg 的代码的工作方式。感觉不对，但对于我的生活，我无法弄清楚如何解决它。同时，这意味着我找不到一种好方法让 bg 淡入而不是轻弹存在。有什么想法吗？

https://codepen.io/EpicTriffid/pen/xrjxVE

$(document).ready(function() {

var curUnit = "F";

//Backgrounds

var clearday = "url('https://static.pexels.com/photos/125457/pexels-photo-125457.jpeg')";
var clearnight = "url('https://static.pexels.com/photos/355465/pexels-photo-355465.jpeg')";
var rain = "url('https://static.pexels.com/photos/125510/pexels-photo-125510.jpeg')";
var snow = "url('https://static.pexels.com/photos/41088/pexels-photo-41088.jpeg')";
var sleet = "url('https://static.pexels.com/photos/27629/pexels-photo-27629.jpg')";
var wind = "url('https://static.pexels.com/photos/6041/nature-grain-moving-cereal.jpg')";
var fog = "url('https://static.pexels.com/photos/109037/pexels-photo-109037.jpeg')";
var cloudy = "url('https://static.pexels.com/photos/158163/clouds-cloudporn-weather-lookup-158163.jpeg')";
var partlycloudyday = "url('https://static.pexels.com/photos/152536/pexels-photo-152536.jpeg')";
var partlycloudynight = "url('https://static.pexels.com/photos/23985/pexels-photo-23985.jpg')";


//location API

var darksky = 'https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/';

var apikey = "15f8bf5641489ec32f66662221933c14";

$("#myweather").load("window",function() {     
$.ajax({
url: "https://geoip-db.com/jsonp",
jsonpCallback: "callback",
dataType: "jsonp",
success: function(loc) { 
$("#location").load("window", function() {
$("#location").html(loc.city).fadeIn(1000);
});

//Weather Summary

$("#result").load("window", function() {
$.getJSON(darksky + apikey + "/" + loc.latitude + "," + loc.longitude, function(forecast){
$("#result").html(forecast.currently.summary).fadeIn(2000);
//Skycon
function addSkycon() {
var skycons = new Skycons({color: 'white'});
var skyconCanvas = document.getElementById("skycon");
skycons.add(skyconCanvas, forecast.currently.icon);
var iconsum = forecast.currently.icon
skycons.play();
$("#skycon").fadeIn(2000);
if(iconsum == "clear-day") {
document.body.style.backgroundImage = clearday;
}
else if(iconsum == "clear-night") {
document.body.style.backgroundImage = clearnight;
}
else if(iconsum == "rain") {
document.body.style.backgroundImage = rain;
}
else if(iconsum == "snow") {
document.body.style.backgroundImage = snow;
}
else if(iconsum == "sleet") {
document.body.style.backgroundImage = sleet;
}
else if(iconsum == "wind") {
document.body.style.backgroundImage = wind;
}
else if(iconsum == "fog") {
document.body.style.backgroundImage = fog;
}
else if(iconsum == "cloudy") {
document.body.style.backgroundImage = cloudy;
}
else if(iconsum == "partly-cloudy-day") {
document.body.style.backgroundImage = partlycloudyday;
}
else if(iconsum == "partly-cloudy-night") {
document.body.style.backgroundImage = partlycloudynight;
}
} addSkycon();
//Temperature
$("#corf").load("window", function() {
$("#corf").fadeIn(2000);
});
var ftemp = Math.round(forecast.currently.temperature);
var ctemp = Math.round((forecast.currently.temperature - 32) *
(5 / 9))
$("#temp").html(ftemp).fadeIn(2000);
$("#corf").on("click", function() {
$("#temp").fadeOut(function() {
if (curUnit == "F") {
$("#temp").html(Math.round(ctemp));
$("#degreeswitch").html("&degc"); 
curUnit = "C";
}
else {
$("#temp").html(Math.round(ftemp));
$("#degreeswitch").html("&degf");
curUnit = "F";
}
$("#temp").fadeIn(); 
});
});
});
});
}
});
});
});

#spacer { 
margin:0;
padding:0;
height:50px; 
}
body {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;  
position: fixed;
top: 0;
left: 0;
background-color:black;
background-image:
}
.text {
color:white;
font-family:"raleway";    
}
#myweather {
margin-left:30px;
margin-top:30px;
font-size:5em;
}
#header {
float:left;
margin-left:20px;
}
#location {
font-style: italic;
color:white;
margin-left:-200px;
display:none;
}
#skycon {
padding:30px;
display:none;
}
#result {
position:relative;
padding-top:20px;
padding-left:60px;
display:none;
}
#temp {
padding-left:60px;
font-size:150px;
display:none;  
}
#corf {
color:white;
font-weight:bold;
display:none;
margin-left:-45px;
margin-top:-30px;
}
#degreeswitch {
font-family:"raleway";
}
#degreecon {
margin-top:2%; 
margin-left:-2%;  
}
#mark {
text-align: center;
font-family:"raleway";
font-size: 20px; 
position: fixed;
bottom: 0;
width:100%;
color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Fonts-->
<head>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/climacons-fork/1.0.0/climacons.min.css" rel="stylesheet">
</head>
<!--Background-->
<!--Skycons-->
<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
<!--Header-->
<h1 id="myweather" class="text">myWeather.</h1>
<!-- location -->
<div id="header" class="container-fluid">
<h4 class="text">Weather for :</h4>
</div>
<div class="container">
<h4 id="location" class="text"></h4>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
<canvas id="skycon" width="300" height="300">
</canvas>
</div>
<div class="col-xs-10">
<h2 class="text" id="result"></h2>
</div>
<div class="col-xs-2">
<h1 class="text" id="temp"></h1>
</div>
<div id="degreecon" class="col-xs-2">
<svg id="corf">
<text id="degreeswitch" x="31" y="67" fill="white" font-size="50px">&degf</text>
<circle cx="50" cy="50" r="30" stroke="white" stroke-width="3" fill="transparent"/>        
</svg>
</div>
</div>
</div>
<div id="mark">By<a href="https://codepen.io/EpicTriffid/full/MJzMgK/" target="_blank"> Epic Triffid </a>and powered by<a href="https://darksky.net/forecast/" target="_blank"> Darksky </a>and<a href="" target="_blank"> GeoIP</a></div>

抱歉，我似乎也无法获得工作链接：/

Answer 1

我已经为你解决了。以下是更新的代码笔：https://codepen.io/anon/pen/jwvELj

基本上，我创建了一个新元素<div id="background"></div>并使其固定覆盖全屏。我将它的z-index设置为 0，并将其余内容包装在<div id="wrapper"></div>中，并将该z-index设置为 1。我已经更改了您的 if 语句，而不是直接使用background-image修改<body>标签的 CSS，我现在将变量设置为图像的 URL。

现在是魔术发生的时候。这是代码片段

var bg = new Image();
bg.onload = function(){
$('#background').css({'background-image': 'url('+imgUrl+')'});
$('#background').addClass('visible');
}
bg.src = imgUrl;

我们正在 JS 中创建一个新的Image对象，并定义一个在加载图像时运行的函数。该函数设置#background的背景图像，并向其添加类visible。我默认使背景不可见，并设置了类visible以使其opacity: 1;。这具有1.5s过渡，弥补了不错的淡入淡出效果。希望这就是你要找的。