Realizar una animación combinando diferentes funciones del framework jquery para entender
el comportamiento de eventos, eventos y modificadores de CSS.

Lo que se quiere realizar…

1. Ocultar y desplegar un parrafo por medio de links
2. Resaltar el parrafo a ocultar

Este es un primer tutorial donde miraremos el uso practico, elegante y facil de la libreria de efectos de jquery.  El efecto consiste en mostrar cierta información en una imagen solamente cuando el usuario lo desee pasando el raton sobre esta. Para ver una demostracion hacer click aqui

Primero necesitamos un contenedor que encierre todas las partes que van a estar en nuestro efecto, este contenedor es un div que contiene la clase foto este nombre es clave para iniciar y terminar el efeto. Segundo necesitamos dos div que contienen la informacion escondida que aparecera al hacer mouseover sobre el contenedor, a estos los llamaremos con la clase cabeza y pie_foto. Finalmente el objet que siempre estara visible en el efecto, en este caso la imagen reporte.png

<div class='foto'>
		<div class='cabeza'><span>Cabecera</span></div>
		<img src='img/reporte.png' alt='reporte' />
		<div class='pie_foto'><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div>
 </div>

La primera consideracion que hay que tener en cuenta es cuando se van a colocar varios elementos juntos en un contenedor, el contenedor debe ser de posición relativa y el contenido ocuto debe ser posicion absoluta. Lo segundo, los div cabecera y pie deben estar escondidos inicialmente. Finalmente darle opacidad al los contenedores del texto escodido.

	.foto{
		position:relative;
		overflow:hidden;
		border:5px solid #000;
		width:410px;
		height:193px;
		font-family: Arial;
	}
	.foto .cabeza, .foto .pie_foto{
		position:absolute;
		background:#000;
		width:410px;
		opacity:0.6;
        filter:alpha(opacity=60);
         -moz-opacity:0.6;
        -khtml-opacity: 0.6;
	}
	.foto .cabeza{
		display:none;
		height:25px;
	}

	.foto .pie_foto{
		display:none;
		bottom:0;
		height:50px;
	}

	.foto .cabeza span{
		color: #F9882E;
	    display: block;
	    font-size: 12px;
	    font-weight: bold;
	    padding: 4px 0 0 8px;
	    top: 0;
	}
	.foto .pie_foto span{
		color:#999;
        font-size:9px;
        display:block;
        padding:5px 10px 0 10px;
	}

Como el efecto trata de pasar el raton sobre la imagen y mostrar un texto escondido vamos a necesitar un manejador de eventos, en este caso usamos .hover el cual nos va ejecutar dos funciones:

1. Entra el raton al contenedor: Se aplica un css al los div que tienen  el texto escondido cambiando la propiedad display:none a display:block
2. Sale raton del contenedor: Se coloca nuevamente los textos escondidos cambiando el css a display:none

$(document).ready(function () {

    $('.foto').hover(
        function() {

            $('.foto .cabeza').slideDown(1000, function() {
				$(this).css('display','block');
			});
			$('.pie_foto').slideDown(1000, function() {
				$(this).css('display','block');
			});

        },

        function() {
           $('.foto .cabeza').slideUp(1000, function() {
				$(this).css('display','none');
			});
			$('.pie_foto').slideUp(1000, function() {
				$(this).css('display','none');
			});
        });
	});

4.Conclusión

Este es un efecto muy facil de realizar y muy util en cualquier pagina donde se quiera mantener la simplicidad en el manejo de informacion en conunto con las fotos. Cualquier critica es bienvenida y mucho mejor si es constructiva. Para descargar este efecto hacer click aqui