JQuery .slideDown() đang trượt lên

Question

Tác phẩm này nhưng tôi không chắc chắn tại sao. Trong function capIn(), trong tâm trí của tôi, dòng $botcap.slideDown("slow") sẽ trượt div xuống. Nó trượt nó lên. Nếu tôi thử sử dụng .slideUp(), không có gì xảy ra như thể nó đang cố gắng trượt xuống. bất cứ ai có thể giải thích điều này với tôi?

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

Hàm slideDown và slideUp của jQuery thực sự là những từ sai. Là tài liệu cho số slideUp đặt:

Ẩn các phần tử phù hợp với chuyển động trượt.

Ẩn được thực hiện bằng cách sửa đổi chiều cao của phần tử; thông thường, điều này có nghĩa là cạnh dưới của phần tử xuất hiện để trượt lên, do đó tên. Tuy nhiên, nếu phần tử được neo ở dưới cùng (ví dụ: bằng cách đặt position: absolute và bottom: 0), sửa đổi độ cao sẽ làm cho cạnh trên xuất hiện để trượt xuống.

Answer 2

Có thể khắc phục được $('.botcap') các yếu tố có vùng chứa và căn chỉnh vùng chứa ở phía dưới cùng.

Answer 3

Đã xảy ra sự cố tương tự và đã xem xét câu hỏi này, nhưng tự tìm thấy câu trả lời. Điều này là do định vị phần tử với vị trí tuyệt đối và đáy: 0; Điều này sẽ thực sự xử lý phần tử như thể nó là phần dưới, do đó slideDown() của nó sẽ đi lên. Nó có thể được cố định bằng cách sử dụng hàng đầu: (chiều cao của phần tử) thay vì đáy: 0.