ansaurus

Question

Answer 1

+1 A:

This is a bug in IE.

No current version of IE supports the opacity CSS proeprty, so jQuery uses the Alpha filter instead. However, filters force the element to be fully opaque, so they don't work orrectly with transparent PNGs.

To use transparent PNGs in semi-transparent elements, the PNGs need to be applied using the AlphaImageLoader filter (even in IE8). For example:

if ($.browser.msie)
    $(something).css({
        background: 'none',
        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Folder/Image.png", sizingMethod="scale"),alpha(opacity=100)'
    });

(This code works; I'm using it right now)

SLaks 2010-04-13 22:04:40

Note that even then, the combination of `alphaimageloader` and `alpha` isn't quite the same as `opacity` would be. The transparency per pixel seems to be `max(image_opacity, filter_opacity)` instead of `image_opacity*filter_opacity`. (This is not always a displeasing effect in an animation.)

bobince 2010-04-13 22:23:27

can i add that to my existing .js file? when i do, i get an error "missng ");"... here is what i have: $(document).ready(function() { $('#business-blue').hide();$('a#biz-blue-lnk').click(function() {$('#business-blue').animate({opacity: 'toggle'}, 800);return false; });});

tony noriega 2010-04-13 22:24:37

@SLaks it looks like there is a missing ' tick mark... becuase i am getting an error...

tony noriega 2010-04-13 22:28:59

You're right; I mis-pasted the code. It should work now.

SLaks 2010-04-13 22:37:41

got it. works fine. thank you.

tony noriega 2010-04-14 16:14:38

ansaurus

tags:

views:

answers:

jquery toggle and transprent PNG

related questions