jQuery slideUp() không co lại giá trị padding-bottom

Question

Trong this fiddle, bạn sẽ nhận thấy khi bạn nhấp vào một trong các nút, vùng chứa sẽ từ từ trượt lên. Khi nó lên đến đỉnh, bạn sẽ thấy rằng nó không hoàn toàn trượt lên. Nếu bạn nhìn vào thanh tra, phần đệm đáy của li không co lại như bạn mong đợi trong quá trình hoạt động slideUp().

Bất kỳ ý tưởng nào tại sao?

Lưu ý: trượt lên quá chậm để hiển thị tốt hơn vấn đề.

Lưu ý 2: Khi tôi thay đổi thư viện jQuery thành 1.7.2, nó thực sự hoạt động chính xác. Hấp dẫn.

FWIW: Tôi đã đệ đơn ticket với jQuery

Answer 1

EDIT:

hồi quy này đã được cố định trong jQuery 1.8.1 - fiddle.

---

Như bạn đã nhận thấy, đây là lỗi khác trong v1.8.0.

Điều này fiddle chứng tỏ rằng paddingBottom chỉ đơn giản là bị trừ ở phần cuối của hoạt ảnh của slideUp. Phép trừ tinh tế paddingBottom không hiển thị trên fiddle của bạn bởi vì khi bạn gọi slideDown bên trong cuộc gọi lại, số paddingBottom được thêm lại ngay lập tức (theo phương thức so sánh với cách trừ đi). Fiddle

nếu bạn không muốn đợi cho đến khi bản sửa lỗi được phát hành và không muốn hạ xuống 1.7.2, giải pháp tạm thời để làm cho nó hoạt động như 1.7.2 sẽ là chuyển bản đồ thuộc tính CSS tới .animate:

function next() { 
    var q = $(this).parents('li'); 
    q.data('originalDimensions', { 
     borderTopWidth: q.css('borderTopWidth'), 
     paddingTop: q.css('paddingTop'), 
     height: q.css('height'), 
     paddingBottom: q.css('paddingBottom'), 
     borderBottomWidth: q.css('borderBottomWidth') 
    }); 
    q.animate({ borderTopWidth:0, paddingTop:0, height:0, paddingBottom:0, borderBottomWidth:0 }, 5000, function(){ 
     $(this).animate($(this).data('originalDimensions'), 5000); 
    }); 
} 

Fiddle

Hãy bỏ phiếu lên vé của bạn và hy vọng nó được cố định trong phiên bản 1.8.1.

chỉnh sửa: Cập nhật các workaround để lưu trữ các originalDimensions trong các yếu tố của .data(), cách này nó có thể được sử dụng tại một thời gian sau đó và trong một phạm vi khác nhau. Animate nhiều yếu tố cùng một lúc, sử dụng .each lặp để thiết lập các .data():

q.each(function() { 
    var $this = $(this); 
    $this.data('originalDimensions', { 
     borderTopWidth: $this.css('borderTopWidth'), 
     //... 
    }); 
}); 
q.animate({ borderTopWidth:0, /*...*/ }, 5000, function() { 
    $(this).animate($(this).data('originalDimensions'), 5000); 
}); 

Fiddle