IE8 the black side _jquery when jquery changes the transparency of a PNG image

Png24 format of the picture in jquery add display hidden animation found that the translucent area of the picture appears black edge?

Search on the internet there are mainly the following methods:

1, save the picture into PNG-8 format.

2, the background color together into and save as JPG format.

The above two methods I tried, as if the effect is not good PNG8 format will still have a black edge.

Workaround:

1, do not directly change the transparency of the picture, but to the picture set a container, to modify the transparency of this container
2, to this container to add a color similar to the background color (very important, the key to solve the bug in this step,)
Typically, this bug is resolved, and if there is a problem, see below:

3. Add a zoom:1 to the container
(personally feel that this approach is only a camouflage, not fundamentally solve the problem, it seems to be the case now, look for a better way)

At present, the Internet for Web page effect requirements more and more high, the inevitable use of PNG pictures, PNG is divided into several formats, PNG8 PNG24 PNG32, the most commonly used, but also show the effect and the size of the more moderate is PNG24, supporting translucent, transparent, color is very rich, But because our countrymen use IE Series or IE as the core series of browsers, and because WINDOWS XP in the domestic market share is larger, and many people in XP are still using IE6 IE7 IE8 Browser, and these browsers for PNG support more or less gap, IE6 completely does not support PNG,IE7 IE8 support PNG is incomplete, when you change the transparency of a picture under IE7 IE8, the PNG transparent area will have a black border and, if translucent, the entire translucent area is black, which is not acceptable for a pleasing page. Research, found that the PNG when the background, with Microsoft-specific filters to load the picture, you can solve the IE6 does not support PNG problem, and can also solve the IE7 and IE8 under the use of jquery animation transparency effect when the black edge problem, there is a real image of the code, as follows

JavaScript code

<script> function Correctpng () {var arversion = navigator.appVersion.split ("MSIE") var version = parsefloat (AR
    VERSION[1]) if (version >= 5.5) && (document.body.filters) {var lee_i = 0;
    var docimgs=document.images;
      for (var j = 0; J < Docimgs.length J + +) {var img = docimgs[j] var imgname = Img.src.toUpperCase (); if (imgname.substring (imgname.length-3, imgname.length) = = "PNG" &&!img.getattribute ("Usemap")) {Lee_
        i++; var Spanid = Img.id | |
        ' Ra_png_ ' + lee_i.tostring ();
        var imgdata = new Image ();
        Imgdata.prodata = Spanid;  Imgdata.onload = function () {$ ("#" + this.prodata). CSS ("width", this.width + "px"). CSS ("height", This.height +
        "px");
        } imgdata.src = Img.src;
        var imgid = "Id= '" + Spanid + "'"; var imgclass = (img.classname)? "Class= '" + img.classname + "'": "" var imgtitle = (img.title)? Title= ' "+ img.title +" ' ": "title= '" + Img.alt + "'" var imgstyle = "Display:inline-block;" + img.style.cssText if (img.align = "
        Left "] Imgstyle =" Float:left "+ imgstyle if (img.align = =" right ") Imgstyle =" float:right; "+ Imgstyle  if (img.parentElement.href) Imgstyle = "Cursor:hand;" + imgstyle var strnewhtml = "<span" + imgid + Imgclass + Imgtitle + "style=\" "+" width: "+ img.width +" PX;
       Height: "+ img.height +" px; "+ Imgstyle +"; + "Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\ '" + img.src + "\", sizingmethod= ' scale '); \ "
        ></span> "img.outerhtml = strnewhtml;
      j = j-1; and/or whether it is IE8 and the following browsers, in fact, in addition to these three browsers do not support AddEventListener, other browsers are no problem if (typeof Window.addeventlistener = = "Undefined" & amp;& typeof document.getelementsbyclassname = = "undefined") {window.attachevent ("onload", Correctpng);} &LT;/SCR
 Ipt>

In the page before the end of the/body tag jquery1.8 class library, and then add the above code, IE6 7 8 show PNG24 No problem, if you need to perform animate animation or get pictures, found in IE 6 7 8 can not find a PNG picture, Or find a change in its location and the transparency diagram does not respond because Correctpng replaces all of PNG's IMG tags on the page with a span label and then uses FILTER:PROGID:D on the Span tab XImageTransform.Microsoft.AlphaImageLoader the PNG picture in, so it is recommended that you include the picture in Div, which allows only an IMG tag, and then a position or transparency action on the DIV Cases:

<div id= ' test ' ></div>
<script>
$ ("#test"). Animate ({opacity : 0.2,marginleft:500},1000,function () {alert (' run Complete ');});
</script>

There is also a situation where I have to change the width and height of this image in addition to transparency and displacement, and I recommend the following methods

<div id= ' test ' ></div>
<script>
$ ($ ("#test span") [0]| | $ ("#test img") [0]). Animate ({opacity:0.2,marginleft:500,width: ' 500px ', Height: ' 500px '},1000,function ()] {alert (' Run Complete ')
; </script>

There are questions welcome to discuss together