Question

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

我已经在其中创建了一个带有绝对定位图像的div，其想法就是像脉冲一样淡入淡出图像。一切顺利，直到IE8出现。

请参阅代码链接。在FF中工作正常，也就是说div在连续循环中淡入淡出。但是在IE8中，它会逐渐消失，然后停止。

在FF＆amp; IE8与mootools 1.2.5，但不是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();

更新 IE似乎并不总是喜欢这种被链接的特定转换。您可能需要将其删除并使用默认值。

Mootools 1.3 Fx.Morph'opacity'在IE8中不起作用

1 个答案: