Fade in my background-image using jquery

169
April 10, 2017, at 09:56 AM

a few of this question is already in StackOverflow but none of the answers fixed my problem. The closest I got was my background image changing with fade in but I get a white flash before the transition.

The page is a weather API that gets the current weather in your location and changes the background accordingly. The background image that I want to fade is the one that comes after I get the weather.

I tried a lot, but nothing seems to work. I am new in JS and Jquery. PS. if you see a loading animation forever is because you still did not accept to find your location.

$(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); 
        }); 
    }); 
});
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); 
    } 
}
<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>

READ ALSO
Share button inside bootstrap popover

Share button inside bootstrap popover

I'm having a problem adding the linkedin share button inside the bootstrap popoverInside the popover, nothing happens when I click the button Out of the popover the button works very well

205
Angular ng-show not reflecting change to variable

Angular ng-show not reflecting change to variable

I have an angular controller and a timeout calling a function that is setting a variable that an ng-show relies onIt seems the variable is successfully being changed, but the html element is still showing up

251
could not find the place to edit the celsius

could not find the place to edit the celsius

I have a svg of digital thermometerI want to change the value as per the data the user provides

116
Add a element with listener within react element

Add a element with listener within react element

I am working on creating a contenteditable div and change elements to wrap some part of text typed by user into a span or p with a on click listener and show a new pop on hoverRight now I am doing something like this

195