jQuery - làm mờ mục trong/ngoài khi giữ lại bố cục luồng

Question

Tôi có một danh sách các mục trong ứng dụng web của mình; mỗi trong số này có một bộ các nút lệnh được sắp xếp bên dưới nó.

Để giữ cho giao diện sạch sẽ, các nút này chỉ hiển thị khi bạn di chuột qua mục đó. Các nút được bao bọc trong thẻ có thuộc tính CSS sau: visibility: hidden

Điều này bảo toàn bố cục - để các mục danh sách không nhảy xung quanh khi các nút được tiết lộ.

Điều tôi muốn làm là làm mờ các nút vào/ra bằng jQuery. Tuy nhiên, các phương pháp mặc định (fadeIn(), fadeOut()) dường như sử dụng display: none, loại bỏ các nút khỏi luồng.

Điều tôi cần là cách để làm mờ chúng vào hoặc ra bằng thuộc tính visibility. Vì vậy, trước khi tôi bắt tay vào một tìm kiếm, có ai biết một cách rõ ràng để làm điều này mà tôi đang thiếu?

Chúc mừng

Answer 1

Tạo các trình bao bọc trống DIV (có thứ nguyên được chỉ định) cho các phần tử bạn đang mờ dần. Làm mờ những gì bên trong. Cách khác, bạn có thể làm mờ nó xuống 1%, do đó, nó sẽ vẫn chiếm không gian, nhưng hầu như không nhìn thấy được.

Answer 2

Có vẻ như $ (this) .fadeTo ("slow", 0); nên làm điều đó, các tài liệu không nói gì về cài đặt hiển thị. Chỉ fadeOut() có display: none; đặt trong tài liệu, nhưng hãy cho tôi một chút và tôi sẽ thử nghiệm nó.

Answer 3

cuộn fadeout của riêng bạn, như thế này:

$(this).animate({opacity: "0.0"});