Estoy tratando de hacer que esta imagen de fondo se desvanezca cuando se carga la página.
Intenté seleccionar la imagen por clase y usé el método fadeIn() pero no sucede nada al cargar la pantalla.
¿Me estoy perdiendo de algo?
// document.ready(alert("Welcome!")); $(".background").ready(function () { $(".background").fadeIn("slow"); });Arriba está el jQuery que he estado probando.
Y aquí está el html para referencia:
<body> <img class="background" src="restaurant.jpg" /> </body>¡Gracias! También soy nuevo en jQuery, solo estoy aprendiendo ...
// 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;'>Primero oculte la imagen y luego pruebe el siguiente código que se ejecuta una vez cargado el dom.
// Alternative to load event document.onreadystatechange = function () { if (document.readyState === 'complete') { console.log('loaded'); $(".background").fadeIn("slow"); } }Debe configurar la display: none; inicialmente
<img class="background" src="restaurant.jpg" style="display: none;"/>Y luego puedes llamar a esto en tu Javascript
$(".background").ready(function () { $(".background").fadeIn("slow"); });O así
$(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"/>