JQuery Opacity file PNG hiển thị không đúng trên Internet Explorer khi được fadeIn(), fadeOut, fadeTo(), animate()… và cách khắc phục

Hôm nay, sếp nhờ mình viết một plugin WordPress hiển thị hình ảnh và cho nó có hiệu ứng chuyển đổi hình ảnh qua lại. Hiệu ứng được mô tả như sau: 1 hình mờ dần, 1 hình khác hiện rõ dần(fade in và fade out cùng một lúc). Ngay lập tức mình nghĩ ngay đến JQuery + HTML + CSS để làm cho ý tưởng này. Cả ngày lọ mọ, cuối cùng mình cũng viết được. Test trên Chrome thì OK. Chạy thử trên Firefox thì cũng ổn. Nhưng khi chạy trên Internet Explorer thì ọe ọe như hình bên dưới.

Lúc slideshow được load lên

Sau khi hiệu ứng xảy ra background bị đen thui

Chuyện gì đã xảy ra?
Vấn đề rất là đơn giản, lỗi bị xảy ra là do file hình ảnh là loại file png và file png bị lỗi opacity trên Internet Explorer. Mặc dù mình đã thử nhiều method của JQuery như là fadeIn(), fadeOut(), fadeTo(), css({opacity:0}), animate() nhưng vẫn bị lỗi background đen thui như trên khi fade in hay là fade out.
Khắc phục như thế nào?
Sau cả ngày ngồi vò đầu, bức tóc và tay gõ google liên tục thì mình cũng tìm được cách. Nếu chúng ta fadeIn() hay fadeOut() trên chính image object thì lỗi sẽ xảy ra. Để sẽ hiểu hơn bạn nhìn vào ví dụ bên dưới.

và ta có đoạn code JQuery fadeOut() hình trong vòng 2 giây

$('#hinh_png').fadeOut(2000);

Nếu ta chạy đoạn code trên Internet Explorer chắc chắc sẽ bị lỗi trên
Để khắc phục tình trạng này, chúng ta cần làm 3 điều sau:
– Bỏ image vào một container nào đó(div chẳng hạn)
– Styling hơi đặc biệt cho image
– Fade in hoặc fade out cái container chứa image
Ok! Chúng ta tiến hành fix lỗi
Bạn xem ví dụ bên dưới để hiểu rõ hơn:
– Bỏ image vào một container nào đó như sau:

– Styling hơi đặc biệt cho image:

.container img{
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
}

– Fade in hoặc fade out cái container chứa image

$('.container').fadeOut(2000);

Hết. Chúc bạn giải quyết được khi gặp ngay lỗi này giống mình