Tutorial jQuery – V2 «Efecto desvanecimiento»

Hoy seguimos con el tutorial numero V2 de jQuery.

Esta vez vamos a ver como con un código muy simple podemos hacer el efecto desvanecimiento de una imagen hasta que desaparece …

Ver ejemplo

Cuando se haga clic en una imagen con class=”delete” la capa irá desapareciendo lentamente con una animación.

Lo único que tendréis que hacer esta vez es:

1. Incluir la librería de Jquery (como en el anterior tutorial)

   [html][/html]

2. Codigo javascript para hacer referencia de lo que queremos desvanecer, el cual irá incluido entre las etiquetas de cabecera de la página:

   [js]
   
   $(document).ready(function(){

   $(«.pane .delete»).click(function(){
   $(this).parents(«.pane»).animate({ opacity: ‘hide’ }, «slow»);
   });

   });
   [/js]

3. Código para mostrar el panel en la página:

   [html]

    

   Ejemplo cabecera

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

   

   [/html]

Ejemplo: Ver ejemplo

Anterior Tutorial: Tutorial jQuery – V1