Mootools 1.3 Fx.Morph 'opacity' not working in IE8 - internet-explorer-8

Question

http://jsfiddle.net/hL6rT/1/
I've created div with a absolute positioned image inside it the idea is to fade the image in and out like a pulse. All went well until IE8 showed up.
See the link for code. Works fine in FF, that is to say the div fades in and out in a continuous loop. But in IE8 it fades in and out once and then stops.
Works fine in FF & IE8 with mootools 1.2.5, but not 1.3 or 1.3 Compatibility Mode.
For some bizarre reason if the alert after 'fadeIn' is included in the onComplete the function will display the alert and the second alert in the 'fadeOut' onComplete, but still NOT fade the div.
Help?

Answer 1

it is probably easier to do just the tween on the element via the oncomplete to make a blink effect:
http://jsfiddle.net/hL6rT/2/
var fadeImg = document.id('lucy');
fadeImg.set("tween", {
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
this.element.fade(this.element.getStyle("opacity") == 0 ? 1 : 0);
}
}).fade(0);
// how you can cancel it
document.id("stop").addEvent("click", function(e) {
e.stop();
fadeImg.get("tween").cancel(); // this cancels it.
});
to fix your version:
http://jsfiddle.net/hL6rT/4/
works fine if you set the initial value of opacity to 0
var fadeImg = document.id('lucy').setStyle("opacity", 0);
var fadeIn = function() {
var inDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
fadeOut();
//alert('FadeIn Complete');
}
}).start({
'opacity': ['0', '1']
});
};
var fadeOut = function() {
var outDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeOut,
onComplete: function() {
fadeIn();
//alert(FadeOut Complete!');
}
}).start({
'opacity': ['1', '0']
});
};
fadeIn();
update IE does not seem to consistently like this particular transition being chained. you may need to remove it and use the default one.