I'm trying to get this background image to fade in when the page loads.
I've tried selecting the image by class and used the fadeIn() method but nothing is happening when loading the screen?
Am I missing something?
// document.ready(alert("Welcome!"));
$(".background").ready(function () {
$(".background").fadeIn("slow");
});
Above is the jQuery I've been trying.
And here is the html for reference:
<body>
<img class="background" src="restaurant.jpg" />
</body>
Thanks! Im also brand new to jQuery just learning..
// Alternative to load event
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
alert('Dom loaded');
$(".download").fadeIn();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src='https://www.w3schools.com/images/compatible_chrome.png' class='download' style='display:none;'>First hide the image then Try the below code which executes once dom loaded.
// Alternative to load event
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
console.log('loaded');
$(".background").fadeIn("slow");
}
}
You need to set your image display: none; initially
<img class="background" src="restaurant.jpg" style="display: none;"/>
And then you can call this in your Javascript
$(".background").ready(function () {
$(".background").fadeIn("slow");
});
Or like this
$(document).ready(function() {
$(".background").fadeIn("slow");
});
$(document).ready(function() {
$('.background').css("display", "none").fadeIn(5000); // 5 Second
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="background" src="https://picsum.photos/200/300"/>