Efecto “cortinilla” vertical con JQuery

He pensado que para empezar a poner ejemplos de JQuery lo mejor es empezar por algo sencillo, y lo más sencillo que tengo hecho en la página, a parte de los bordes redondeados que ya explicaré, es la posibilidad de crear un efecto de contracción y expansión de los elementos del sidebar, no preguntes la utilizad, simplemente me pareció bien implementarlo

Si has ido siguiendo este blog, y has estructurado el sidebar como expliqué en esta entrada simplemente tendrá que copiar y pegar la siguiente función en el documento ready.js, sino, tienes dos posibles caminos, entender el código y adaptarlo, cosa que no es muy difícil, o ir a la entrada en cuestión y estructurar tu sidebar así, lo más recomendable.

Primero pongo el código, y después lo explico:

PLAIN TEXT

JavaScript:

$('.sidebartop').click(function() {
if($(this).next().is(":hidden")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});

Parece más complejo de lo que realmente es, pero no te preocupes, traduciré por lineas:

"Al hacer click en un elemento .sidebartop..."
"...si el elemento siguiente a éste (en el que he hecho click) está oculto..."
"...desplegar hacia abajo el elemento siguiente a éste..."
"...en caso contrario..."
"...contraer el elemento siguiente a éste..."
Esta linea y siguientes sólo acaban de cerrar la función.

Puedes dejar el ratón encima de algo que no entiendas para que aparezca un texto que te diga que parte del código es la que realiza cada cosa.

Como puedes observar es muy sencillo realizar un efecto "cortinilla" con JQuery.

Para terminar, te recomiendo echarle un ojo a las funciones slideUp() y slideDown(), ya que aceptan como pará metros la velocidad del efecto y funciones a realizar al terminarlo.

Compárteme: