That’s funny, I seem to get conflicting results in both my research and my testing for this. You may have to first set the opacity in CSS before you animate it, that fixed a similar problem for me in IE before. Quirksmode (http://www.quirksmode.org/css/opacity.html) mentions the very same thing you do, however both methods seem to work for me when I visit the page in IE8?

In any event, I suppose I will add the extra support in the next version just to be sure. Better safe than sorry right.

Thanks for the heads up!

One thing though… IE 8 throws an error when trying to animate an element’s opacity. I recently came across http://qfox.nl/notes/61, which explains that IE8 uses e.filters.item(“DXImageTransform.Microsoft.Alpha”).opacity instead of el.filters(‘alpha’).opacity. The solution would involve changing from:

var opacity = el.filters(‘alpha’).opacity;
return isNaN(opacity) ? 1 : (opacity ? opacity / 100 : 0);

to (http://qfox.nl/notes/61):

var opacity;
try { // IE 8
opacity = el.filters.item(“DXImageTransform.Microsoft.Alpha”).opacity / 100;
} catch (er) {
try { // IE 7
opacity = el.filters(“alpha”).opacity / 100;
} catch (er2) {
opacity = 1;
}
}
return opacity;

Thats right, I couldn’t think of a valid use case for starting an element with say a pixel value and then animating it using em? I figure it would be best practice to define the starting value of the element in CSS using the units you will animate the element with.

That is true, the reason I avoid that specific segment of code in IE is because of the difference between the currentStyle property of IE and the getComputedStyle method of standard compliant browsers.

The getComputedStyle method always returns values in pixels, meaning if you set a div in your CSS to “width: 40%” it will return the pixel value for that. The currentStyle property will return the value as defined in your CSS “40%”. Which means only for those browsers that use the getComputedStyle method that extends from document.defaultView and a from value is defined in the initial call we need to convert it to the pixel value of the from value.

If you run the demo in IE8 and use their DOM inspector you will see that the values are using the correct units.

Thimo

Nicely done! It’s good to see some developers using FX and expanding upon it! I like the idea of animating to the styles of a className.

As for the unit conversion in FX, which browser/os are you using I’ve tested my demo in IE6, IE7, and IE8 on both vista and XP without issue.

Great work on the plugin! I think I’ll be including some of your ideas in a future version.

I have written an animation plugin to KSS, based on your library:
http://www.joonis.de/kss-effects-plugin

I made some modifications as mentioned before:
RGBA-support, named colors, backgroundPosition, etc.

Also the unit conversion did not work for IE and all units. I changed this at the expense of size.

Again, thank you for your work.

Let me see if I can address each of your questions/recommendations one at a time:

1) Fixed styles could be interesting, its not something I have considered before, you can post the code here or email whatever you have at rm.morr@gmail.com and I’ll look it over.

2) The backgroundPosition is something I would never use for animation, and I’m not sure why you ever would? With that said I’ll look it over, thanks for the heads up!

3) I realize jQuery likes to mash together the value and units together for its animation, but the main reason I didn’t go that route is because I wanted to avoid users animating a style from one unit to another (2em to 300px). I don’t consider this good practice, so I decided to restrict it outright.

4) RGBA, and named colors are just a few of the features I’m considering for future versions

5) The unit conversion is absolutely cross-browser and is actually based somewhat on jQuery’s unit conversion. I can’t claimed I’ve tested it in every browser, but so far as I can tell the library, and therefore the unit conversion works in IE6+, FF2+, Opera 9+, Safari 3+, and Chrome 1+

I made some modifications to support fixed styles, which are changed after a given threshold. Let me know if you would like to implement this feature.

Also the property backgroundPosition needs some work…

Overall I would prefer to replace the extra units property with the possibility to parse the raw style into its value and unit on the fly.

Some other ideas: RGBA-support, named colors,…
Does the unit conversion work cross-browser?