[jQuery] [patch]maybe fix opacity bugs in msie
I don't know if the opacity bugs has been fixed in the newest version, but I checked the source code it seems that no fix about this. I made some changes in 1.0.1 version, the here is the code.
attr: function(elem, name, value){
var fix = {
"for": "htmlFor",
"class": "className",
"float": "cssFloat",
innerHTML: "innerHTML",
className: "className",
value: "value",
disabled: "disabled"
};
<span style="color: rgb(0, 0, 0); background-color: rgb(255, 0, 0);">
var v;</span>
if ( fix[name] ) {
if ( value != undefined ) elem[fix[name]] = value;
return elem[fix[name]];
} else if ( elem.getAttribute ) {
<span style="background-color: rgb(255, 0, 0);">
//add opacity process</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> if (name == 'opacity' && jQuery.browser.msie)</span><br style="background-color: rgb(255, 0, 0);">
<span style="background-color: rgb(255, 0, 0);"> if (value != undefined){</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> name = 'filter';
</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> value = 'alpha(opacity=' + value * 100 + ')';</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);">
}</span>
if ( value != undefined ) elem.setAttribute( name, value );
v = elem.getAttribute( name, 2 );
<span style="background-color: rgb(255, 0, 0);"> if (name == 'opacity' &&
jQuery.browser.msie){</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> v = elem['filter'];</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);">
if (v){</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> v = parseFloat(v.match(/\d+/)[0])/100;</span><br style="background-color: rgb(255, 0, 0);">
<span style="background-color: rgb(255, 0, 0);"> }</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> else</span><br style="background-color: rgb(255, 0, 0);">
<span style="background-color: rgb(255, 0, 0);"> v = 0;</span><br style="background-color: rgb(255, 0, 0);"><span style="background-color: rgb(255, 0, 0);"> }</span>
return v;
} else {
name = name.replace(/-([a-z])/ig,function(z,b){return b.toUpperCase();});
<span style="background-color: rgb(51, 102, 255);"> //add opacity process</span><br style="background-color: rgb(51, 102, 255);">
<span style="background-color: rgb(51, 102, 255);"> if (name == 'opacity' && jQuery.browser.msie)</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);">
if (value != undefined){</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);"> name = 'filter';</span><br style="background-color: rgb(51, 102, 255);">
<span style="background-color: rgb(51, 102, 255);"> value = 'alpha(opacity=' + value * 100 + ')';</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);">
}</span>
if ( value != undefined ) elem[name] = value;
v = elem[name];
<span style="background-color: rgb(51, 102, 255);"> if (name == 'opacity' && jQuery.browser.msie
){</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);"> v = elem['filter'];</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);">
if (v){</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);"> v = parseFloat(v.match(/\d+/)[0])/100;</span><br style="background-color: rgb(51, 102, 255);">
<span style="background-color: rgb(51, 102, 255);"> }</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);"> else</span><br style="background-color: rgb(51, 102, 255);">
<span style="background-color: rgb(51, 102, 255);"> v = 0;</span><br style="background-color: rgb(51, 102, 255);"><span style="background-color: rgb(51, 102, 255);"> }</span>
return v;
}
},
You'll find the code is kinda ugly, but I'm not very clear the mechanism of jQuery. I see that as I calling:
$().css('opacity', 0)
it will call $.fn.css() -> $.fn.attr() ->
jQuery.attr() with <span style="font-weight: bold;">this.style</span>, so in jQuery.attr() it can not judge if it's style object or an element, I think it's not very clear. And in jQuery.attr(), I thought only add some code arround (
<span style="background-color: rgb(51, 51, 255);">blue color</span>)
if ( value != undefined ) elem[name] = value;
that's enough. But I was wrong. Because for style object, the judgement "if ( elem.getAttribute
)" will be successful. So I also add some code(<span style="background-color: rgb(255, 0, 0);">red color</span>) arround it. And this time as I test css('opacity', 1) in IE, it's ok. But I found as I call $().css('opacity') the result would be undefined, so there is also another bugs I think. And I found later in curCSS function, I add below code in the end of the function:
if ( prop == "opacity" && jQuery.browser.msie ){
ret = parseFloat( elem.style["filter"].match(/\d+/) )/100;
}
and seems that the jQuery.css not be used in $().css().
I don't know if this has some useful.
--
I like python!
My Blog: <a href="http://www.donews.net/limodou">http://www.donews.net/limodou</a>
UliPad Site: <a href="http://wiki.woodpecker.org.cn/moin/UliPad">
http://wiki.woodpecker.org.cn/moin/UliPad</a>
UliPad Maillist: <a href="http://groups.google.com/group/ulipad">http://groups.google.com/group/ulipad</a>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/