Làm thế nào để mờ dần để hiển thị: inline-block

Question

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

Tôi muốn sử dụng hàm jquery .fadeIn(). Điều này đòi hỏi yếu tố ban đầu có một màn hình: không có; để ẩn nó ban đầu. Sau khi fadeIn() các phần tử tắt khóa học có màn hình mặc định: kế thừa;

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

Answer 1

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

Answer 2

Chỉ cần xác thịt ra ý tưởng tốt Phil, đây là một fadeIn() mà tải mất dần trong mỗi phần tử với lớp .faded đến lượt nó, chuyển đổi sang 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 rằng sẽ giúp một newb jQuery như bản thân mình :) Nếu có một cách tốt hơn để làm điều đó, hãy cho chúng tôi!

Answer 3

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

Answer 4

Theo jQuery docs cho .show(),

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

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 gọi là "ẩn" áp dụng display: none; Khi tôi .show() trên phần tử, nó cho thấy nội tuyến.

Answer 5

câu trả lời Makura đã không làm việc cho tôi như vậy 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(); 

hide ngay lập tức áp dụng display: none nhưng trước đó nó tiết kiệm giá trị hiển thị hiện tại trong bộ nhớ cache dữ liệu jQuery mà sẽ được phục hồi bởi các cuộc gọi hoạt hình tiếp theo.

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

Answer 6

Điều này làm việc ngay cả với display:none được đặt trước bởi css.Sử dụng

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

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

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

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

Tôi coi đây là một cách giải quyết như tôi tin fadeIn() nên làm việc để nó sẽ chỉ loại bỏ các quy tắc cuối cùng - display:none khi được đặt thành #element{display:inline-block;display:none;} nhưng nó bị trục trặc loại bỏ cả hai.