» Publicación:
31 julio 2011
/
Categoría:

Desaparecer divs de manera sutil con “Simple Disappearing Effect”

¿Haz visto sitios webs que tienen como ventanas de contenido con botones para cerrarlas y estás desaparecen?, si por casualidad no los haz visto deberías hacerlo, ingresando a esta entrada y aún más si tampoco sabes como hacerlo. Ya que este es el nuevo tutorial aprenderemos a hacer funcionar el llamado “Simple Disappearing Effect”.

Para hacer funcionar este bello efecto en jQuery al igual que en Simple Slide Panel, lo que debemos hacer primero es descargar una copia de jQuery e insertarlo en el HTML de tu página (de preferencia dentro de la etiqueta).

Ahora para activar las funciones de nuestro jQuery debemos colocar el siguiente código:

Como podemos ver en la siguiente imagen, esta es la estructura de los Divs y CSS del elemento.

Simple Disappearing Effect

Ahora expliquemos como va el funcionamiento de los Divs. Cuando hacemos click en el <img class=”delete”> el contenido llamado <div class=”pane”> donde se encuentra el contenido deberia desaparecer.

Ahora vamos al código CSS que debemos colocar, obviamente el “body”, el Párrafo y todas esas cosas las podemos cambiar).

Ahora vamos al código HTML que debemos colocar, recuerda bajar la imagen llamada “btn-delete.gif” (que en este caso esta guardada en la carpeta “images”.

Como vemos esto lo podemos replicar varias veces y serian cajas diferentes que desaparecerían al hacer click en el botón de cerrar.

El resultado de todo este código será lo siguiente:

Ver demo

  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
Etiquetas
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: