CODEWITHSUNDEEP
jqueryinternet-explorerpng
Vegetus
Vegetus

Reputation: 733

Jquery - fadeIn() and fadeOut() in PNG image. Border Solid (black) in IE8...?

I am running a fadeIn() and fadeOut() in a block of div where there is a PNG image, with semi-transparent funds (with shadow).

See in http://jsfiddle.net/k3KUj/8/embedded/

In IE 8, it appears the hard edges when you run the fadeIn() and fadeOut(), but soon disappears. In Firefox, it's OK.

Logical to apply a background color in PNG (for example, with the link above, the background color should be light gray), it works.

But do not want to put a background color in PNG. I'm trying to get black borders do not appear in IE 8, even if you have a PNG image transparency.

Looking at the response in the forum, tried:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" ; /* IE8 /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); / IE6 & 7 */
zoom: 1;

and see in jquery IE Fadein and Fadeout Opacity

$('#bloc').css('filter', 'alpha(opacity=40)');

and see in fadeIn / fadeOut jquery problem with IE7/8 & png

$("#bloc").css('filter', 'none');

But, doesn't work. Any new idea, without applying any color in the image background transparent?

Thanks, Vinicius.

Upvotes: 3

Views: 4390

Answers (1)

ThiagoAlves
ThiagoAlves

Reputation: 898

Define a solid background color to your image:

    .container img {
         background-color: white;
    }

Define the background-image css property of your image to its src attribute:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Advantage: you don't need to change your markup

Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

Upvotes: 1

Related Questions