Javascript 尝试优化我的背景更改，并尝试使其淡入

刚刚完成我的FCC挑战天气预报页面。然而，我不喜欢交换我的bg的代码是如何工作的。感觉有点不对劲，但就我个人而言，我不知道该如何解决它。同时，这意味着我找不到一个好的方法使背景淡入而不是突然出现。有什么想法吗

$（文档）.ready（函数（）{
var curUnit=“F”；
//背景
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')";
//位置API
var darkskyhttps://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/';
var apikey=“15f8bf5641489ec32f66662221933c14”；
$（“#myweather”）.load（“窗口”，函数（）{
$.ajax({
url:“https://geoip-db.com/jsonp",
jsonpCallback：“回调”，
数据类型：“jsonp”，
成功：功能（loc）{
$（“#位置”）.load（“窗口”，函数（）{
$（#location”）.html（loc.city）.fadeIn（1000）；
});
//天气摘要
$（“#结果”）.load（“窗口”，函数（）{
$.getJSON（暗基+apikey+“/”+loc.LATIONE+“，“+loc.LATIONE，函数（预测）{
$（“#结果”）.html（forecast.current.summary）.fadeIn（2000）；
//天控
函数addSkycon（）{
var skycons=新的skycons（{color:'white'}）；
var skyconCanvas=document.getElementById（“skycon”）；
添加（skyconCanvas，forecast.Current.icon）；
var iconsum=forecast.current.icon
天敌。play（）；
$（“#skycon”）。fadeIn（2000年）；
如果（iconsum==“晴天”）{
document.body.style.backgroundImage=clearday；
}
否则如果（iconsum==“晴朗之夜”）{
document.body.style.backgroundImage=clearnight；
}
否则如果（iconsum==“雨”）{
document.body.style.backgroundImage=雨；
}
否则如果（iconsum==“雪”）{
document.body.style.backgroundImage=snow；
}
否则，如果（iconsum==“雨夹雪”）{
document.body.style.backgroundImage=雨夹雪；
}
否则如果（iconsum==“风”）{
document.body.style.backgroundImage=风；
}
否则如果（iconsum==“雾”）{
document.body.style.backgroundImage=fog；
}
否则如果（iconsum==“多云”）{
document.body.style.backgroundImage=多云；
}
否则，如果（iconsum==“部分阴天”）{
document.body.style.backgroundImage=partlycloudyday；
}
否则，如果（iconsum==“部分多云的夜晚”）{
document.body.style.backgroundImage=partlycloudynight；
}
}addSkycon（）；
//温度
$（“#corf”）.load（“窗口”，函数（）{
$（“#corf”）。fadeIn（2000年）；
});
var ftemp=Math.round（forecast.current.temperature）；
var ctemp=Math.round（（forecast.current.temperature-32）*
(5 / 9))
$（“#temp”）.html（ftemp）.fadeIn（2000）；
$（“#corf”）。在（“单击”，函数（）上）{
$（“#temp”）.fadeOut（函数（）{
如果（电流单位=“F”）{
$（“#temp”）.html（Math.round（ctemp））；
$（“#degreeswitch”）.html（“°c”）；
curUnit=“C”；
}
否则{
$（“#temp”）.html（Math.round（ftemp））；
$（“#degreeswitch”）.html（“°f”）；
curUnit=“F”；
}
$（“#temp”）.fadeIn（）；
});
});
});
});
}
});
});
});
#间隔{
保证金：0；
填充：0；
高度：50px；
}
身体{
最小高度：100%；
最小宽度：1024px；
宽度：100%；
高度：自动；
位置：固定；
排名：0；
左：0；
背景色：黑色；
背景图像：
}
.文本{
颜色：白色；
字体系列：“雷威”；
}
#我的天气{
左边距：30px；
边缘顶部：30px；
字号：5em；
}
#标题{
浮动：左；
左边距：20px；
}
#位置{
字体：斜体；
颜色：白色；
左边距：-200px；
显示：无；
}
#天控{
填充：30px；
显示：无；
}
#结果{
位置：相对位置；
填充顶部：20px；
左侧填充：60px；
显示：无；
}
#临时工{
左侧填充：60px；
字体大小：150px；
显示：无；
}
#球茎{
颜色：白色；
字体大小：粗体；
显示：无；
左边距：-45px；
利润上限：-30px；
}
#除油开关{
字体家族
var bg = new Image();
bg.onload = function(){
   $('#background').css({'background-image': 'url('+imgUrl+')'});
   $('#background').addClass('visible');
}
bg.src = imgUrl;