Tutorial: Notificaciones animadas con jQuery

Hoy vamos a ver un tutorial en el que crearemos sencillas pero efectivas notificaciones con jQuery que podrá entender hasta el mas novato.

Veamos como queda el resultado final y vamos a ello.

Javascript

En esta parte vamos a crear la función notify() que será la encargada de crear las notificaciones con parámetros que controlan el texto del mensaje (msg), la velocidad a la que aparece (speed), cuanto tarda en desaparecer (fadeSpeed), y el tipo de notificación (type).

function notify(msg,speed,fadeSpeed,type){
 //crear notificaciones
}

Ahora vamos a ver el código que crea las notificaciones con la clase .notify en el body de la página.

function notify(msg,speed,fadeSpeed,type){
 $('body').append('
<div class="notify '+type+'" style="display: none; position: fixed; left: 10px;">
'+msg+'</div>
');
}

Podéis ver que hemos añadido el tipo de notificación (type) como una clase y el texto del mensaje (msg) en un párrafo a parte de ocultar la notificación (display:none) y asignarle position:fixed, para mantenerlo visible aunque el usuario se desplace por la página.

function notify(msg,speed,fadeSpeed,type){

 $('body').append('<div class="notify '+type+'" style="display:none;position:fixed;left:10"><p>'+msg+'</p></div>');

 notifyHeight = $('.notify').outerHeight();

 $('.notify').css('top',-notifyHeight).animate({top:10,opacity:'toggle'},speed);
}

Hemos guardado la altura de la notificación en notifyHeight para posicionarla fuera del body. Para ello, le aplicamos la propiedad css top con su altura negativa.

Después de posicionarla, animamos la notificación cambiando la posición a top:10 y mostrándola con opacity:’toggle’. Definimos la velocidad de la animación con speed.

Ahora solo nos queda crear un temporizador para hacer desaparecer la notificación y estamos casi listos.

function notify(msg,speed,fadeSpeed,type){

 $('.notify').remove();

 if (typeof fade != "undefined"){
 clearTimeout(fade);
 }
 $('body').append('<div class="notify '+type+'" style="display:none;position:fixed;left:10"><p>'+msg+'</p></div>');

 notifyHeight = $('.notify').outerHeight();

 $('.notify').css('top',-notifyHeight).animate({top:10,opacity:'toggle'},speed);

 fade = setTimeout(function(){

 $('.notify').animate({top:notifyHeight+10,opacity:'toggle'}, speed);

 }, fadeSpeed);

}

Hemos creado un temporizador en la variable fade y para ocultar la notificación, volvemos a usar opacity:’toggle’, ya que este, oculta si está visible y al contrario automáticamente.

También, eliminamos cualquier notificación antes de crear una nueva mediante remove() y reseteamos cualquier temporizador que pudiera estar activo con clearTimeout(fade).

Si os habéis fijado, es necesario comprobar que fade no esté sin definir (undefined) ya que si no lo hacemos vamos a recibir errores.

Hasta aquí hemos llegado con Javascript, ahora vamos con CSS.

CSS

El CSS estrictamente necesario, se resume a aplicarle un tamaño a la notificación:

.notify{
 width: 250px;
}

A parte de esto, los colores de fondo, texto y demás, son completamente opcionales.

¡Está vivo!

Podéis comprobar el resultado final, en el que he creado un tipo de notificación de error y empezar a crear vuestras propias notificaciones.

También es aconsejable descargar el código ya que es mucho mas fácil entenderlo con los comentarios.

A disfrutar de vuestras notificaciones y gracias al amigo Venkman que sugirió usar position:fixed en ved de absolute.

Links: Descargar código | Demo

Etiquetas: animado, avisos, jQuery, mensajes, notificaciones