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

Функции jQuery slideDown и slideUp на самом деле являются неправильными.Как указано в документации для slideUp:

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

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

Answer 2

Это из-за позиционирования элемента с абсолютным положением и дном: 0;Это на самом деле будет обрабатывать элемент, как если бы он был основан снизу, поэтому его slideDown () идет вверх.Это можно исправить, используя top: (высота элемента) вместо bottom: 0.

Answer 3

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