Đơn giản mờ dần và hiển thị trong jQuery

Question

Tôi đang cố gắng thay đổi thuộc tính css visibility của div thành visible với chuyển tiếp jQuery .fadeIn().

Đây là mã của tôi:

$('a').click(function() { 
    $('#test').fadeIn('slow', function() { 
    $(this).css('visibility','visible'); 
    }); 
});​ 

và fiddle: http://jsfiddle.net/np6r7/

Answer 1

Bạn không thể animate visibility. fadein được tắt khóa display:none;, vì vậy phải là trạng thái ban đầu của #test qua CSS. Nếu bạn cần giữ cách bố trí, bạn có thể thử kiểm tra gói trong một div chỉ định chiều cao và/hoặc chiều rộng bạn cần.

Answer 2

Thực ra, tôi thích câu trả lời của davidaam. Tôi sẽ thực hiện một sửa đổi nhỏ:

$('#test').css('visibility','visible').hide().fadeIn("slow"); 

Answer 3

Bạn cũng có thể sử dụng độ mờ CSS kết hợp với tính năng làm mờ của JQuery để đạt được điều tương tự.

Thay vì sử dụng tầm nhìn trong CSS của bạn, sử dụng opacity: 0; Sau đó sử dụng jQuery FadeTo để tăng opacity đến 100%:

$('#test').fadeTo('slow', 1);

này sẽ duy trì vị trí như tầm nhìn hiện, tuy nhiên, điều quan trọng cần lưu ý rằng opacity: 0 phản hồi các sự kiện như nhấp và nhấn cũng như tham gia vào taborder. Ngoài ra, tôi cũng đọc rằng việc sử dụng chịu trách nhiệm của visibility: hidden thay vì display: none là tốt hơn cho SEO, nhưng tôi không chắc chắn cách thức này áp dụng cho opacity: 0.

JSFIDDLE: http://jsfiddle.net/np6r7/15/