MooTools的1.3 Fx.Morph「不透明」在IE8

Question

不工作

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

我創建的div內部具有絕對定位圖像的想法是淡入淡出像脈衝圖像。一切順利，直到IE8出現。

查看代碼鏈接。在FF中正常工作，也就是說div在連續循環中淡入淡出。但在IE8中，它會淡入淡出，然後停止。

在FF中正常工作&帶有mootools 1.2.5的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(); 

更新 IE似乎並不一致地喜歡這種被鏈接的特定轉換。您可能需要刪除它並使用默認的。