Làm mờ các phần tử vào và ra mà không thay đổi bố cục của trang

Question

Hành vi bình thường khi sử dụng fadeIn và fadeOut là sử dụng the display property. Tuy nhiên, điều này thay đổi cách bố trí của trang.

Làm cách nào để tạo fadeIn và fadeOut không sửa đổi bố cục của trang?

Answer 1

Cũng

thay vì .fadeIn() bạn có thể .animate({opacity:1})
và thay vì .fadeOut() bạn có thể .animate({opacity:0})

Answer 2

Bạn có thể thử điều này cho fadeOut:

$("something here").fadeOut("slow", function() { 
    $(this).show().css({visibility: "hidden"}); 
}); 

... và điều này cho fadeIn:

$("something here").hide().css({visibility: "visible"}).fadeIn("slow"); 

Answer 3

Sử dụng fadeTo:

Phương pháp .fadeTo() sinh động độ mờ đục của các yếu tố phù hợp. Nó tương tự như phương thức .fadeIn() nhưng phương thức đó bỏ ẩn phần tử và luôn mờ dần đến độ mờ là 100%.

Thời lượng được tính bằng mili giây; các giá trị cao hơn cho biết hình động chậm hơn, không phải các giá trị nhanh hơn. Các chuỗi 'fast' và 'slow' có thể được cung cấp để cho biết thời lượng tương ứng là 200 và 600 mili giây. Nếu bất kỳ chuỗi nào khác được cung cấp, thời lượng mặc định là 400 mili giây được sử dụng. Không giống như các phương pháp hiệu ứng khác, .fadeTo() yêu cầu phải chỉ định rõ ràng duration.

Nếu được cung cấp, gọi lại là bắn khi hoạt hình được hoàn tất ...

Answer 4

Nhờ 10gler giải pháp của tôi dưới đây, sử dụng tầm nhìn để tránh vô hình nút bấm, vv

//fadeIn 
$("#x") 
    .css('visibility', 'visible') 
    .fadeTo('fast', 1); 

//fadeOut 
$("#x") 
    .fadeTo('fast', 0, function() { 
     $(this).css('visibility', 'hidden'); 
    }); 

Answer 5

Sử dụng một sự kết hợp của các câu trả lời ở trên, điều này làm việc tốt cho tôi. Bạn có thể thay đổi thời gian hoạt ảnh theo ý thích của mình.

Để fadeIn:

 $('selector').animate({opacity:1, visibility:'visible'}, 200); 

Để fadeOut:

 $('selector').animate({opacity:0, visibility:'hidden'}, 200); 

Hãy chắc chắn để thiết lập visibilty:'hidden' và opacity:0 lúc bắt đầu để tránh những cửa sổ pop đột ngột trên phai đầu tiên nhập nếu hiển thị mặc định là ẩn, nếu không nó không quan trọng.

 $('selector').css({opacity:0, visibility:'hidden'});