Cách làm mờ để hiển thị: inline-block

98

Trong trang của tôi, tôi có một loạt (khoảng 30) nút dom sẽ được thêm vào ẩn và mờ dần khi chúng được tải đầy đủ.
Các phần tử cần hiển thị: kiểu khối nội tuyến.

Tôi muốn sử dụng hàm jquery .fadeIn (). Điều này yêu cầu phần tử ban đầu có hiển thị: none; quy tắc để ban đầu ẩn nó. Sau fadeIn (), tất nhiên các phần tử có màn hình mặc định: inherit;

Làm cách nào tôi có thể sử dụng chức năng mờ dần với giá trị hiển thị khác với giá trị kế thừa?

jquery fade

— Boris Callens
nguồn

39

Bạn có thể sử dụng chức năng hoạt ảnh của jQuery để tự thay đổi độ mờ, giúp màn hình không bị ảnh hưởng.

— philnash
nguồn

Tôi thích giải pháp này hơn, giữ CSS khỏi JS của tôi.

— joshuadelange

14

@joshuadelange không thực sự, độ mờ cũng là CSS

— Roy

+1 để tập trung vào quy trình kỹ thuật hiển thị / che giấu sự phấn khởi vào vị trí cần có.

— klewis

233

$("div").fadeIn().css("display","inline-block");

— MakuraYami
nguồn

5

Đây chắc chắn là câu trả lời tốt hơn.

— Jason

25

Câu trả lời chính xác! Thậm chí tốt hơn, bạn có thể để trống để mặc định bất cứ điều gì bạn có trong CSS của bạn:$("div").fadeIn().css("display","");

— Brandon Durham

1

Đây thực sự phải là câu trả lời được chấp nhận; câu trả lời được chấp nhận hiện tại là một bình luận nhiều hơn.

— Sinister Beard,

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });chắc chắn rằng display: inline-block được thực hiện khi fadeIn là xong

— Simon

nó không hoạt động đối với tôi ... được áp dụng trên một div có kiểu hiển thị ban đầu được đặt thành không sử dụng một lớp. Kiểm tra phần tử, tôi thấy rằng trong vài phần nghìn giây, ngay sau khi gọi fadeIn, nó có inline-block theo kiểu của nó, sau đó kiểu được đặt thành khối. với Simon gợi ý hiệu quả là không tốt đẹp, như trong fadeIn nguyên tố này được hiển thị như khối

— Giox

11

Chỉ để làm sáng tỏ ý kiến hay của Phil, đây là một fadeIn () tải dần dần trong mỗi phần tử với lớp .faded lần lượt, được chuyển đổi thành animate ():

Cũ:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

Mới:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Hy vọng điều đó sẽ giúp ích cho một người mới sử dụng jQuery khác như tôi :) Nếu có cách nào tốt hơn để làm điều đó, hãy cho chúng tôi biết!

— Phát triển Mere
nguồn

9

Câu trả lời của Makura không phù hợp với tôi nên giải pháp của tôi là

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hidengay lập tức áp dụng display: nonenhưng trước đó nó lưu giá trị hiển thị hiện tại trong bộ đệm dữ liệu jQuery sẽ được khôi phục bằng các lệnh gọi hoạt ảnh tiếp theo.

Vì vậy, divbắt đầu được định nghĩa tĩnh là display: none. Sau đó, nó được đặt thành inline-blockvà ẩn ngay lập tức chỉ để làm mờ trở lạiinline-block

— Clodoaldo Neto
nguồn

2

Theo tài liệu jQuery cho .show(),

Nếu một phần tử có giá trị hiển thị là nội tuyến, sau đó bị ẩn và hiển thị, nó sẽ một lần nữa được hiển thị nội tuyến.

Vì vậy, giải pháp của tôi cho vấn đề này là áp dụng quy tắc css cho hiển thị lớp: inline-block trên phần tử, sau đó tôi thêm một lớp khác có tên "hide" áp dụng display: none; Khi tôi .show()vào phần tử, nó hiển thị nội tuyến.

— tình yêu
nguồn

Tôi giả định rằng điều này cũng sẽ hoạt động khi bạn thiết lập #el{display:inline-block;display:none;}và sau đó chạy $('#el').fadeIn();bạn nhận được khối nội tuyến. Nhưng nó không.

— Fanky

0

Điều này hoạt động ngay cả với display:nonecài đặt trước của css. Sử dụng

$('#element').fadeIn().addClass('displaytype');

(và cả $('#element').fadeOut().removeClass('displaytype');)

với thiết lập trong CSS:

#element.displaytype{display:inline-block;}

Tôi coi đây là một giải pháp thay thế vì tôi tin rằng fadeIn()sẽ hoạt động để nó chỉ loại bỏ quy tắc cuối cùng - display:nonekhi được đặt thành #element{display:inline-block;display:none;}nhưng nó đang loại bỏ cả hai lỗi.

— Fanky
nguồn