El día de ayer (Jueves 4 de Marzo) me encontraba realizando algunas modificaciones a la página Web del FLISOL UAM-I, cuando me llego un mensaje por twitter, el cual decía que la fecha del evento debería ser maás visible, entonces me di cuenta de que en efecto, la fecha era algo que debia resaltar ante cualquier otra cosa, entonces me di a la tarea de pensar en como haría para que la fecha del evento del FLISOL resaltára mucho más, de inmediato me llego a la mente JQuery, con sus efectos de fadeIn y fadeOut podría hacer que la fecha resaltara. Entonces encontre la siguiente solución.

No es muy ortodoxa, ni tampoco es la mejor, pero de verdad que ayuda…. si no me creen denle una checada a la página Web del FLISOL UAM-I, entonces mi solución es la siguiente:


// con JQuery hacemos que el selector desaparesca y aparesca con el efecto de fadeIn
$('.clase_aviso').hide(0); // la desaparecemos
$('.clase_aviso').fadeIn(3500); // la aparecemos  con efecto de fade

setTimeout(// hacemos que el efecto tarde unos segundos 5 segundos para ser exactos...
	function(){
		$('.clase_aviso').fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeIn(300); // llamar la atención del visitante
	},
	5000 // tiempo de retardo
);

$('.clase_aviso').click(function()	{$('.clase_aviso').fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).fadeIn(300); // llamar la atención del visitante
});

Entonces, lo que hace el codigo anterior es que cuando carga la página muestra la clase en fadeIn, despues de 5 segundos, hace un fadeOut y fadeIn repetidas veces para que el usuario se de cuenta de este, finalmente agregue el evento click a la clase, para que cada vez que el usuario de click sobre la clase muestre otra vez el efecto antes mencionado….

La clase que se utilizo para el sitio Web del FLISOL UAM-I fue el siguiente:


.clase_aviso{
	display: inline-block;
	position: fixed;
	top: 10px;
	left: 10px;
	height: 133px;
	width: 133px;
	/*
	Si gustan pueden agregarle una imagen de fondo o solo un color de fondo, pero tiene que contrastar con los colores del sitio, pues si no, su efecto habrá sido en vano...
	*/
}

Y después de esto, sean felices con su nuevo efecto de jquery en los avisos mas importantes..

Saludos.

via: http://arkos.net63.net