The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript HELP!!! PNG transparency in ie

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #26506

    Hello everyone,
    I am working on my portfolio site, it uses some basic jquery image fade. When you hover over the jars they get a spotlight on them. It works great in mozilla and safari, but IE8 messes up the PNG. It only happens with js enabled, so there is something within jquery that messes me up. I am still in kindergarten when it comes to js, so please help me solve this issue!!! NOTE it works well in firefox and other browsers, not IE.
    Thanks for any help.



    OK I figured it out…
    For you that have a similar issue, maybe this will help:
    I found out that ie handles filters a little differently, the issue is with the browser itself, and not jquery. Whenever you adjust alpha opacity for an image with js, ie takes your transparent png and makes it opaque, instead fading in and out already transparent image. If anyone has a direct fix for this issue, please post it here, I found a workaround:
    Simply do a conditional for ie, looks like this:

    $(this).stop().animate({ marginTop: "-20px" }, 300);
    $(this).parent().find("span").stop().animate({ marginTop: "28px"}, 300);}

    $(this).stop().animate({ marginTop: "-20px" }, 300);
    $(this).parent().find("span").stop().animate({ marginTop: "28px", opacity: 0.5 }, 300);

    I basically turned off fading for ie, notice in "else" bracket, opacity is defined, whereas in .msie it is gone.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.