Mootools 1.3 Fx.Morph“不透明度”在 IE8 中不起作用

Question

http://jsfiddle.net/hL6rT/1/

我创建了 div，其中包含一个绝对定位的图像，其想法是让图像像脉冲一样淡入淡出。一切顺利，直到 IE8 出现。

查看代码链接。在 FF 中工作正常，也就是说 div 在一个连续的循环中淡入淡出。但在 IE8 中它会淡入淡出一次然后停止。

在带有 mootools 1.2.5 的 FF 和 IE8 中运行良好，但不是 1.3 或 1.3 兼容模式。

由于某些奇怪的原因，如果“fadeIn”之后的警报包含在 onComplete 中，该函数将在“fadeOut”onComplete 中显示警报和第二个警报，但仍然不会淡化 div。

帮助？

Answer 1

通过 oncomplete 对元素进行补间来制作闪烁效果可能更容易：

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.
});

修复您的版本： http://jsfiddle.net/hL6rT/4/

如果将不透明度的初始值设置为 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 似乎并不总是喜欢这种被链接的特定转换。您可能需要删除它并使用默认的。