Permalink
Browse files

Teach emile to work with opacity in IE.

  • Loading branch information...
1 parent 5fd40f0 commit bec75a4e684fd701efe1e91069900814a4b55062 @kangax committed Mar 29, 2010
Showing with 36 additions and 7 deletions.
  1. +36 −7 emile.js
View
@@ -7,8 +7,34 @@
'borderRightColor borderRightWidth borderSpacing borderTopColor borderTopWidth bottom color fontSize '+
'fontWeight height left letterSpacing lineHeight marginBottom marginLeft marginRight marginTop maxHeight '+
'maxWidth minHeight minWidth opacity outlineColor outlineOffset outlineWidth paddingBottom paddingLeft '+
- 'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' ');
-
+ 'paddingRight paddingTop right textIndent top width wordSpacing zIndex').split(' '),
+ supportsOpacity = typeof parseEl.style.opacity == 'string',
+ supportsFilters = typeof parseEl.style.filter == 'string',
+ reOpacity = /alpha\(opacity=([^\)]+)\)/,
+ setOpacity = function(){ },
+ getOpacityFromComputed = function(){ return '1'; };
+
+ if (supportsOpacity) {
+ setOpacity = function(el, value){ el.style.opacity = value; };
+ getOpacityFromComputed = function(computed) { return computed.opacity; };
+ }
+ else if (supportsFilters) {
+ setOpacity = function(el, value){
+ var es = el.style;
+ if (reOpacity.test(es.filter)) {
+ value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');
+ es.filter = es.filter.replace(reOpacity, value);
+ }
+ else {
+ es.filter += ' alpha(opacity=' + (value * 100) + ')';
+ }
+ };
+ getOpacityFromComputed = function(comp) {
+ var m = comp.filter.match(reOpacity);
+ return (m ? (m[1] / 100) : 1) + '';
+ };
+ }
+
function interpolate(source,target,pos){ return (source+(target-source)*pos).toFixed(3); }
function s(str, p, c){ return str.substr(p,c||1); }
function color(source,target,pos){
@@ -32,19 +58,22 @@
css = parseEl.childNodes[0].style;
while(i--) if(v = css[props[i]]) rules[props[i]] = parse(v);
return rules;
- }
+ }
container[emile] = function(el, style, opts){
el = typeof el == 'string' ? document.getElementById(el) : el;
opts = opts || {};
var target = normalize(style), comp = el.currentStyle ? el.currentStyle : getComputedStyle(el, null),
prop, current = {}, start = +new Date, dur = opts.duration||200, finish = start+dur, interval,
- easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; };
- for(prop in target) current[prop] = parse(comp[prop]);
+ easing = opts.easing || function(pos){ return (-Math.cos(pos*Math.PI)/2) + 0.5; }, curValue;
+ for(prop in target) current[prop] = parse(prop === 'opacity' ? getOpacityFromComputed(comp) : comp[prop]);
interval = setInterval(function(){
var time = +new Date, pos = time>finish ? 1 : (time-start)/dur;
- for(prop in target)
- el.style[prop] = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
+ for(prop in target) {
+ curValue = target[prop].f(current[prop].v,target[prop].v,easing(pos)) + target[prop].u;
+ if (prop === 'opacity') setOpacity(el, curValue);
+ else el.style[prop] = curValue;
+ }
if(time>finish) { clearInterval(interval); opts.after && opts.after(); }
},10);
}

0 comments on commit bec75a4

Please sign in to comment.