jquery animate để min-height hoặc tự động

Question

Tôi có một số thứ jquery ở đây để tạo hiệu ứng một lớp khi nhấp chuột. Vấn đề đôi khi nội dung có thể vượt quá chiều cao được phân bổ trong cài đặt độ cao. Có cách nào để sửa đổi điều này để animate các lớp đến một chiều cao tối thiểu hoặc tự động thay vì một số px thiết lập?

$(function() { 
    $(".showcart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "200px" }, "fast"); 
    }); 
    $(".hidecart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "0px"}, "fast"); 
    }); 
}); 

Answer 1

Thật không may, bạn không thể nói nó chỉ hoạt hình cho những gì phù hợp. Để làm điều này bạn sẽ phải biết kích thước phù hợp hoặc có cách để tính toán nó.

Nếu điều này xảy ra trong một chức năng duy nhất hoặc một plugin duy nhất bạn có thể muốn xem xét lưu trữ giá trị $(this).height() trong một biến ở đâu đó trước khi bạn mở rộng nó, do đó bạn sẽ có thể đặt nó trở lại nơi nó được sử dụng để được.

Nếu không, một khả năng có thể là đặt div vào bên trong bạn muốn tăng/thu nhỏ và sử dụng get $('> div', $(this)).height() để nhận được chiều cao của div bên trong. lộn xộn với chiều cao của div bên ngoài.

Answer 2

Đây là một vấn đề khó, vì nó phụ thuộc rất nhiều vào cấu trúc trang của bạn. Nếu bạn có thể đặt chiều cao tối thiểu của css, hoặc lấy chiều cao của một phần tử khác làm điểm tham chiếu, bạn có thể tạo hiệu ứng cho kích thước đó làm cho mọi thứ năng động hơn một chút. Thật không may là không có phương pháp tự động thay đổi kích thước tự động trong jQuery.

$(this).css("min-height"); //Gets min-height CSS property 

// or.. 

$(this).height(); //Gets element height 

Hy vọng điều đó sẽ hữu ích.

Answer 3

tôi thấy rằng bạn chỉ có thể làm điều này:

$("#cart").animate({ 'min-height': "250px" }, 'fast'); 

Quotes là điều quan trọng ở đây.