Tôi có một loạt hình thu nhỏ mà tôi đang tải với kiểu visibility: hidden; để tất cả đều duy trì bố cục chính xác của chúng. Một khi trang được nạp đầy đủ, tôi có một chức năng jquery làm mờ chúng. Điều này làm việc khi phong cách của chúng được đặt thành display: none; nhưng rõ ràng là bố cục đã được chỉnh sửa rồi. Bất kỳ đề xuất?yếu tố jquery fade không hiển thị các yếu tố theo kiểu 'mức độ hiển thị: ẩn'
Heres dòng phai:
$('.littleme').fadeIn('slow');
Thêm một vài cuộc gọi đến các chuỗi như thế này:
$('.littleme').css('visibility','visible').hide().fadeIn('slow');
này sẽ thay đổi nó đến display:none cho 1 khung trước khi mờ dần, chiếm lại khu vực.
thử sử dụng opacity và animate():
$('.littleme').css('opacity',0).animate({opacity:1}, 1000);
Tôi luôn luôn hơi mệt mỏi khi sử dụng opacity liên quan đến css vì IE. Có lẽ jquery xử lý này không có vấn đề? – kalpaitch
Điều này sẽ không hoạt động vì nó vẫn không hiển thị, kiểm tra để xem cho chính mình. –
tất nhiên, bạn phải loại bỏ khả năng hiển thị: ẩn. Và có, jQuery xử lý vấn đề độ mờ đục trong IE. – David
Thử kết hợp cho yếu tố bị ẩn?
$ (". Littleme: hidden"). FadeIn();
Bạn không thể sử dụng fadeTo (thời lượng, giá trị) thay thế? Chắc chắn cách này bạn có thể mờ dần đến 0 và 1, như vậy bạn sẽ không ảnh hưởng đến dòng chảy tài liệu ...
<span style="opacity:0;">I'm Hidden</span>
Để Xem: $('span').fadeTo(1000,1)
To Hide : $('span').fadeTo(1000,0)
Các không gian được giữ nguyên trong bố cục DOM
Vì độ mờ không được hỗ trợ trong IE <9 và tôi muốn bắt đầu với trạng thái vô hình, tôi kết hợp giải pháp này với https://github.com/bladeSk/internet-explorer-opacity- polyfill –
Chúc mừng hoạt động tốt. Không có sự chậm trễ đáng chú ý hoặc thay đổi trong 1 khung đó. – kalpaitch
và ngược lại: '$ ('. Littleme'). FadeOut (tốc độ, hàm() {$ ('. Littleme'). Css (" hiển thị "," ẩn ") .ss (" hiển thị "," ") ;}); ':-) – eruciform
@eruciform - để loại bỏ' display: none' ở cuối, bạn chỉ có thể làm '$ ('. Littleme'). FadeTo (speed, 0);', mà sẽ không đặt 'display' ở cuối, cùng hiệu ứng với ít công việc hơn :) –