JQuery .slideDown() скользящий вверх

Question

Это работает, но я не уверен, почему. В function capIn(), на мой взгляд, линия $botcap.slideDown("slow") должна сдвигать div вниз. Он скользит. Если я попытаюсь использовать .slideUp(), ничего не произойдет, как если бы он пытался сдвинуть его. Кто-нибудь может мне это объяснить?

$(".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

slideDown и slideUp функции JQuery являются на самом деле misnomers. Как указано в документации для slideUp:

Скрыть согласованные элементы со скользящим движением.

Укрытие достигается путем изменения высоты элемента; Обычно это означает, что нижний край элемента, как представляется, скользит вверх, отсюда и название. Однако, если элемент закреплен внизу (например, установив position: absolute и bottom: 0), изменение высоты приведет к тому, что верхний край будет скользить вниз.

Answer 2

Одним из возможных исправлений является обертывание $('.botcap') элементов с контейнером и выравнивание контейнера снизу.

Answer 3

Случалось, что у вас была такая же проблема, и посмотрел на этот вопрос, но сам нашел ответ. Это связано с позиционированием элемента с абсолютным положением и снизу: 0; Это фактически обработает элемент так, как если бы он был основан на основании, поэтому его slideDown() движется вверх. Его можно исправить, используя верхний: (высота элемента) вместо дна: 0.