Se trata de un efecto interesante que podemos aplicar a nuestro sitio web ó páginas que deseemos. Nos referimos al efecto Fade (comumente se relaciona con desvanecer ó aparecer ciertos contenidos) que se puede lograr gracias a jQuery.
Dentro de un contenedor <div> colocaremos el contenido al cual aplicaremos el efecto:
<div id="micontenido" style="display:none;"> <!--aca tu contenido. asegurate que sea extenso para que puedas ver el efecto--> </div>
Nada más después de cerrar el contenedor </div> escribe el siguiente código JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#micontenido').fadeIn(1200);
});
});
</script>
Obviamente debemos referenciar en la cabecera del documento HTML a la librería jQuery.
Vía wdlog | Nuestro ejemplo
Hola. Gracias por tus ejemplos. He estado aplicando el ejemplo de registro ajax-php-mysql, combinado con algunas validaciones.
Tengo una duda que no he sabido como enfrentarla, y te solicito si tu me puedes orientar. Me gustaria que al realizar el registro envie un mensaje de “datos guardados”. Hasta ahora consigo que lo haga (como el ejemplo de actualizacion), pero me gustaria aplicar un efecto fadeIn para mostrarlo, y que luego de algunos segundos desaparezca este mensaje…
He tratado con JQuery, con fadeIn…pero no se donde incluir el script.
Agradecido desde ya
Gracias, de mucha utilidad!
Buen ejemplo. El problema radica en que si la pagina tiene algunas imagenes o tiene algún tipo de contenido pesado, el efecto no queda muy bien ya que despues del efecto se siguen cargando las imagenes y asi se arruina el efecto en sí.
Estaría bueno, añadirle una precarga 🙂
Saludos
mmmm… ó podria ser una imagen load tipo facebook cuando carga para mostrar una foto.
Todo queda a criterio del desarrollador.
gracias!
Escelente ejemplo, pero será posible realizar el mísmo efecto desde negro hasta aparecer
hola gracias por ejemplo, lo que queria saber es como hacer lo siguiente. tengo el siguiente codigo que lo copie de este sitio, lo que quiero es hacer click sobre mi div y que funcine tu codigo. No se relacionar el div con jQuery…
$(document).ready(function(){
$(document).ready(function () {
$(‘#micontenido’).fadeOut(1200);
});
});
Sabes me surgio un problema el efecto, resulta que cuando lo aplico a imagenes png, esas imagenes se les pone un contorno medio distorcionado, esto solo me pasa en ie e buscado en google pero aun sin resultados. Espero tu ayuda 😉
Excelente,…PEROOOOOO hay un problema, si uno trabaja con imagenes transparentes .png, la transición se ve horrible, como que no respeta la suavidad de los degradados, tambien la transicion en tre secciones de la pagina, PERO OJO…!!! esto solamente pasa con Internet Explorer, ya que con Firefox, Safari o Chrome se ve de maravilla, sabes alguna manera de solucionarlo para el problematico ie, gracias por el aporte.
Muy buen efecto, lo voy a aplicar en mi pagina web, gracias por compartir, esta muy interesante tu pagina, Saludos!
Disculpa la ignorancia, pero ¿Que librería JQuery se debe agregar?
Aquí lo hice pero como pidió Ricardo, ir de negro, hasta aparecer…
#micontenido
{
width: 1400px;
height: 800px;
position: relative;
background-color:#000;
z-index:150000;
}
$(document).ready(function(){
$(document).ready(function () {
$(‘#micontenido’).fadeOut(2400);
});
});