Mootools 1.3 Fx.Morph « opacité » ne fonctionne pas dans IE8

Question

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

J'ai créé div avec une image absolue à l'intérieur positionnée l'idée est de disparaître l'image et comme une impulsion. Tout s'est bien passé jusqu'à ce qu'IE8 apparaisse.

Voir le lien pour le code. Fonctionne bien dans FF, c'est-à-dire que la div se fane dans une boucle continue. Mais dans IE8, il disparaît une fois puis s'arrête.

Fonctionne correctement dans FF & IE8 avec mootools 1.2.5, mais pas 1.3 ou 1.3 Mode de compatibilité.

Pour une raison bizarre, si l'alerte après 'fadeIn' est incluse dans le onComplete, la fonction affichera l'alerte et la deuxième alerte dans le 'fadeOut' onComplete, mais ne fera pas disparaître la div.

Aide?

Answer 1

il est probablement plus facile de le faire l'interpolation sur l'élément via le onComplete pour faire un effet de clignotement:

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

pour fixer votre version: http://jsfiddle.net/hL6rT/4/

fonctionne très bien si vous définissez la valeur initiale de l'opacité sur 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(); 

mise à jour IE ne semble pas aimer systématiquement que cette transition particulière soit chaînée. vous devrez peut-être le supprimer et utiliser celui par défaut.