slideUp y slideDown en mouseover con jQuery

Hace unos días necesitaba crear un efecto slideUp cuando el ratón pasara sobre un elemento y que cuando el ratón saliera de esa zona, el elemento regresara a su posición original (slideDown). La librería que estaba utilizando era jQuery.

Para hacerlo, la API de jQuery proporciona los eventos:

• mouseenter
• mouseleave

Al principio, creí que los eventos necesarios eran mouseover y mouseout, pero me equivoqué. La diferencia radica en que mouseout se dispara cuando el puntero abandona el elemento, ya sea que vaya a un elemento hijo o a un elemento padre. En el caso de mouseleave, solo se activa cuando el puntero sale del contenedor y de sus hijos.

Primero la estructura HTML

<div class="slide-item">
	<div class="slide-pane-1">
		Pane 1
	</div>
	<div class="slide-pane-2">
		<p>Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 Pane 2 </p>
	</div>
</div>

Después un poco de CSS para esconder el pane 2. Se puede hacer con jQuery, pero no me da la gana. Los dos divs anteriores deben tener el mismo tamaño y debemos ubicarlos de forma vertical. Su contenedor debe funcionar como ‘ventana‘, es decir, que solo se vea un solo elemento.

.slide-item {
	width: 400px;
	height: 400px;
	overflow: hidden;
	background: #adff2f;
}

.slide-pane-1 {
	background: #000000;
	height: 400px;
}

.slide-pane-2 {
	background: #4169e1;
	height: 400px;
}

En total los dos elementos suman 800 pixeles de alto. Pero como dije, su contenedor (slide-item) debe funcionar como ventana, así que solo le damos 400px de alto y overflow: hidden; para que no se vea nada más.

Ahora sí la parte interesante de jQuery.

$(document).ready(function(){
	$(".slide-pane-1").bind("mouseenter",function(){
	      $(this).slideUp("normal");
	   })

	$(".slide-pane-2").bind("mouseleave",function(){
		$(".slide-pane-1").slideDown("normal");
	})
});

Aquí o único que hago es que cuando el mouse entre a la zona que abarca el elemento slide-pane-1, este elemento se deslice hacia arriba, recorriendo todo lo que está debajo de él hacia arriba (el slide-pane-2 se recorre). Una vez que el elemento slide-pane-2 está a la vista, aplico el efecto slideDown cuando el evento ‘mouseleave’ suceda, así el elemento slide-pane-1 baja y regresa a su posición normal.

Pueden ver un ejemplo terminado aquí.

Es un efecto muy simple, pero muy vistoso si saben como implementarlo en un diseño.

¿Por qué no hacerlo con slideToggle? De la forma en la que lo estoy haciendo no me funciona para más de un elemento slide-item. Si uso slideToggle, al pasar el ratón sobre uno, no solo se activaría este elemento sino los demás elementos, porque los estoy seleccionando a todos los que tengan esa clase.