使用jquery

Question

这个问题中的一些已经存在于StackOverflow中，但没有一个答案解决了我的问题。我得到的最接近的是我的背景图像随着淡入而改变，但在转换之前我得到了一个白色的闪光。

该页面是一个天气API，可以获取您所在位置的当前天气并相应地更改背景。我想要褪色的背景图像是我得到天气后的图像。

我尝试了很多，但似乎没有任何效果。我是JS和Jquery的新手。 PS。如果你看到永远加载动画是因为你仍然不接受找到你的位置。

＆＃13;

＆＃13;

$(document).ready(function() {
    function getCurrentLocation(callback) {
        if (!navigator.geolocation) return;
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude = position.coords.latitude;
            longitude = position.coords.longitude;
            url = ('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&appid=b464bb8dd84e7e7d36103593a472ae9a');
            callback(url);
        });

    }

    function celciusToFahrenheit(celcius) {
        var fahrenheit = celcius * (9 / 5) + 32;
        return fahrenheit;
    }

    getCurrentLocation(function(currLocMap) {
        $.getJSON(url, function(json) {
            var html = "";
            var flag = 0;

            if (json.weather[0].id == 800) {
                // clear
                $("body").css("background-image", 'url("http://hires.photospublic.com/PP51292613-Small-cloudy-formations-on-a-clear-sky.jpg")');
            } else if (json.weather[0].id > 800) {
                // clouds
                $("body").css("background-image", 'url("https://static.pexels.com/photos/158163/clouds-cloudporn-weather-lookup-158163.jpeg")');
            } else if (json.weather[0].id >= 700) {
                // fog
                $("body").css("background-image", 'url("https://static.pexels.com/photos/17579/pexels-photo.jpg")');
            } else if (json.weather[0].id >= 600) {
                //snow
                $("body").css("background-image", 'url("http://pre10.deviantart.net/98d7/th/pre/i/2013/012/b/c/snowing_by_austriaangloalliance-d5r9ank.jpg")');
            } else if (json.weather[0].id >= 500) {
                //rainny
                $("body").css("background-image", 'url("http://kingofwallpapers.com/rainy/rainy-019.jpg")');
            } else if (json.weather[0].id >= 300) {
                //light rain
                $("body").css("background-image", 'url("http://kingofwallpapers.com/rainy/rainy-019.jpg")');
            } else if (json.weather[0].id >= 200) {
                $("body").css("background-image", 'url("http://kids.nationalgeographic.com/content/dam/kids/photos/articles/Science/H-P/lightning-trees.jpg")');
            }

            html += '<button class="temp" id="link">'
            html += "<h1>" + Math.round(json.main.temp) + " °C </h1>";
            html += "</button>"

            html += "<h1>" + json.name + "</h1>";
            html += "<h3>" + json.weather[0].main + "</h3>";
            html += "<h3>" + json.weather[0].description + "</h3>";

            $("#data").on('click', '#link', function() {
                var buttonclick = "";
                if (flag == 0) {
                    buttonclick += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>";
                    $("h1", $(this)).html(buttonclick);
                    flag = 1;
                } else if (flag == 1) {
                    buttonclick += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
                    $("h1", $(this)).html(buttonclick);
                    flag = 0;
                }
            });

            $("#block").addClass("square");
            $("#data").html(html);
        });
    });
});

＆＃13;

button#link {
    background: none;
    border: none;
}

button#link:focus {
    outline: 0;
}

body {
    background: url("https://www.tomswallpapers.com/pic/201508/1366x768/tomswallpapers.com-28772.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#data {
    color: #FFFFFF;
}

.square {
    border-radius: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.53);
    left: 40%;
    width: 20%;
    height: 35%;
    top: 30%;
    position: absolute;
    text-align: center;
}

/*Thanks to http://cssload.net/en/spinners/2 for the loading element!*/
.cssload-loader-inner {
    bottom: 0;
    height: 58px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 97px;
}

.cssload-cssload-loader-line-wrap-wrap {
    animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    -o-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    -ms-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    -webkit-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    -moz-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 49px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    width: 97px;
}

.cssload-loader-line-wrap {
    border: 4px solid transparent;
    border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 97px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 97px;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(1) {
    animation-delay: -57.5ms;
    -o-animation-delay: -57.5ms;
    -ms-animation-delay: -57.5ms;
    -webkit-animation-delay: -57.5ms;
    -moz-animation-delay: -57.5ms;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(2) {
    animation-delay: -115ms;
    -o-animation-delay: -115ms;
    -ms-animation-delay: -115ms;
    -webkit-animation-delay: -115ms;
    -moz-animation-delay: -115ms;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(3) {
    animation-delay: -172.5ms;
    -o-animation-delay: -172.5ms;
    -ms-animation-delay: -172.5ms;
    -webkit-animation-delay: -172.5ms;
    -moz-animation-delay: -172.5ms;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(4) {
    animation-delay: -230ms;
    -o-animation-delay: -230ms;
    -ms-animation-delay: -230ms;
    -webkit-animation-delay: -230ms;
    -moz-animation-delay: -230ms;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(5) {
    animation-delay: -287.5ms;
    -o-animation-delay: -287.5ms;
    -ms-animation-delay: -287.5ms;
    -webkit-animation-delay: -287.5ms;
    -moz-animation-delay: -287.5ms;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(1) .cssload-loader-line-wrap {
    border-color: rgb(234, 71, 71);
    height: 88px;
    width: 88px;
    top: 7px;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(2) .cssload-loader-line-wrap {
    border-color: rgb(234, 234, 71);
    height: 74px;
    width: 74px;
    top: 14px;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(3) .cssload-loader-line-wrap {
    border-color: rgb(71, 234, 71);
    height: 60px;
    width: 60px;
    top: 20px;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(4) .cssload-loader-line-wrap {
    border-color: rgb(71, 234, 234);
    height: 47px;
    width: 47px;
    top: 27px;
}

.cssload-cssload-loader-line-wrap-wrap:nth-child(5) .cssload-loader-line-wrap {
    border-color: rgb(71, 71, 234);
    height: 33px;
    width: 33px;
    top: 34px;
}

@keyframes cssload-spin {
    0%,
    15% {
        transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    0%,
    15% {
        -o-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    0%,
    15% {
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    0%,
    15% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    0%,
    15% {
        -moz-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Weather</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div id="block" class="text-center">
        <div id="data">
            <!-- Thanks to http://cssload.net/en/spinners/2 for the loading element! -->
            <div class="cssload-loader-inner">
                <div class="cssload-cssload-loader-line-wrap-wrap">
                    <div class="cssload-loader-line-wrap"></div>
                </div>
                <div class="cssload-cssload-loader-line-wrap-wrap">
                    <div class="cssload-loader-line-wrap"></div>
                </div>
                <div class="cssload-cssload-loader-line-wrap-wrap">
                    <div class="cssload-loader-line-wrap"></div>
                </div>
                <div class="cssload-cssload-loader-line-wrap-wrap">
                    <div class="cssload-loader-line-wrap"></div>
                </div>
                <div class="cssload-cssload-loader-line-wrap-wrap">
                    <div class="cssload-loader-line-wrap"></div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;