JQuery .slideDown() se está deslizando hacia arriba

Question

Esto funciona, pero no estoy seguro de por qué. En function capIn(), en mi opinión la línea $botcap.slideDown("slow") debe deslizar el div abajo. Lo desliza hacia arriba. Si intento usar .slideUp(), no ocurre nada como si estuviera tratando de deslizar hacia abajo. ¿Puede alguien explicarme esto?

$(".slide").hover(capIn, capOut); 

function capIn(){ 
    //slide top caption down 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideDown("slow"); 

    //slide bottom caption up 
    //!! Why does slideDown slide caption up here? 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideDown("slow") 
} 

function capOut(){ 
    //slide top back up 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideUp("slow"); 

    //slide bottom back down 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideUp("slow"); 
} 

Answer 1

de jQuery slideDown y slideUp funciones son en realidad nombres inapropiados. Como la documentación para slideUp lo pone:

Oculte los elementos combinados con un movimiento deslizante.

El ocultamiento se logra modificando la altura del elemento; normalmente, esto significa que el borde inferior del elemento parece deslizarse hacia arriba, de ahí el nombre. Sin embargo, si el elemento está anclado en la parte inferior (por ejemplo, estableciendo position: absolute y bottom: 0), la modificación de la altura hará que el borde superior parezca deslizarse hacia abajo.

Answer 2

Una posible solución sería envolver $('.botcap') elementos con un contenedor y alinear el contenedor en la parte inferior.

Answer 3

Pasó a tener el mismo problema, y ​​busqué esta pregunta, pero encontré la respuesta yo mismo. Esto se debe a posicionar el elemento con la posición y el fondo absolutos: 0; Esto realmente tratará el elemento como si estuviera basado en el fondo, por lo tanto su slideDown() irá hacia arriba. Se puede arreglar utilizando la parte superior: (altura del elemento) en lugar de abajo: 0.