Paneles que desaparecen con jQuery

El conocido efecto de iGoogle, donde podemos eliminar paneles a nuestro gusto, es algo muy sofisticado que le da mayor control al usuario sobre qué le interesa y qué no de nuestro sitio web, blog o aplicación online, o borrar las noticias que ya ha leido, etc.

Este efecto se logra con un poco de código por medio de jQuery. Así podemos incluirlo en nuestro sitio para volverlo más dinámico y también más efectivo a la hora de hacer sentir cómodos a nuestros usuarios. Entérate cómo hacerlo.

Cómo usar jQuery y Javascript para crear paneles eliminables

1. Lo primero es, por supuesto, contar con jQuery (haz clic aquí).
2. Luego deberías crear un botón donde el usuario pueda hacer clic para cerrar el panel.
   img
3. Dentro del head hacemos el llamado con el siguiente script:

   <script type="text/javascript" src="jquery.js"></script>

4. Luego agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).

   <script type="text/javascript">
   $(document).ready(function(){
   
   	$(".contenedor .eliminar").click(function(){
   		$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
   	});
   
   });
   </script>

5. Ahora sólo resta usar las clases de este script dentro de la estructura (HTML).

   <div class="contenedor">
   	<h2>Lorem ipsum 1</h2>
   	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   	Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   	nisi ut aliquip ex ea commodo consequat. </p>
   	<p><a href="">Regresar al tutorial</a></p>
   	<img src="eliminar.png" alt="cerrar" class="eliminar" />
   </div>

6. Luego podemos darle estilo a la clase (el contenedor) y también al botón.

   .contenedor {
   	margin:20px auto;
   	background:#F5E38E;
   	border:2px solid #EBCA4F;
   	padding:10px;
   	width:500px;
   	position:relative;
   }
   .contenedor .eliminar {
   	position: absolute;
   	top: 10px;
   	right: 10px;
   	cursor: pointer;
   }
   h2 { color:#ff0000; font-size:15px; }
   p { font-size:11px; padding: 0 0 11px; color:#333; }
   a { color:#ff8400; }
   body { font-family:verdana, arial; }

Las posibilidades son infinitas, no dudes en experimentar con otras combinaciones.

Haz clic aquí para ver un ejemplo.

Fuente: Blogandweb