Trượt lên/xuống với JQuery cho đến khi một chiều cao nhất định - điều này có khả thi không?

Question

Có thể trượt một div lên (đóng nó) nhưng không hoàn toàn?

Ý tôi là, trượt lên nhưng để lại một chút hiển thị div đó, có thể không?

Cảm ơn trước, mem

Answer 1

Something như thế này có thể làm việc:

$("#div").toggle(
function(){ 
    $("#div").animate({ height:"500px" }, { queue:false, duration:500 }); 
}, 
function(){ 
    $("#div").animate({ height:"50px" }, { queue:false, duration:500 }); 
}); 

Thay vì 500px nó chỉ có thể là kích thước ban đầu của div, và 30px có thể tuy nhiên nhiều bạn muốn hiển thị khi nó được ẩn đi.

Answer 2

Cách tốt hơn để mở div ở chiều cao ban đầu là sử dụng slideDown(). Vấn đề là chức năng này yêu cầu div phải được ẩn trước khi nó có thể mở nó. Cách sau đây là một chút xấu xí nhưng hoạt động tốt:

$("#test").toggle(
function(){ 
    $("#test").css('height', 'auto').hide().slideDown('fast'); 
}, 
function(){ 
    $("#test").animate({ height:'50px' }, { queue:false, duration:500 }); 
}); 

Answer 3

tôi không khuyên bạn sử dụng phương pháp sinh động của jQuery vì nó đôi khi lỗi trong một số trình duyệt. Tạo hiệu ứng cho trang chiếu bằng chuyển tiếp CSS là lựa chọn tốt hơn (theo tôi), bằng cách đặt chiều cao div hoặc chiều cao tối đa.

CSS:

.expandable { 
    max-height: 3em; 
    overflow: hidden; 
    transition: max-height .3s; 
} 

trên nhấp chuột, thiết lập max-height với jQuery:

$(.someSelector).css('max-height', expandedHeight); 

Sau đó, loại bỏ các phong cách khi được nhấp vào một lần nữa:

$(.someSelector).attr('style', ''); 

Bạn có thể nhìn vào this demo example