Mootools 1.3 Fx.Morph 'opacity' не работает в IE8 - PullRequest
Новая
       27

Mootools 1.3 Fx.Morph 'opacity' не работает в IE8

0 голосов
/ 12 ноября 2010

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

Я создал div с абсолютно позиционированным изображением внутри него, идея состоит в том, чтобы постепенно увеличивать и уменьшать изображение, как импульс.Все шло хорошо, пока не появился IE8.

См. Ссылку для кода.Работает нормально в FF, то есть div постепенно исчезает в непрерывном цикле.Но в IE8 он один раз исчезает, а затем останавливается.

Отлично работает в FF и IE8 с mootools 1.2.5, но не в режиме совместимости 1.3 или 1.3.

По какой-то странной причине, еслиоповещение после 'fadeIn' включено в onComplete, функция отобразит оповещение и второе оповещение в 'fadeOut' onComplete, но все же НЕ затухает в div.

Помощь?

1 Ответ

3 голосов
/ 12 ноября 2010

вероятно, проще всего сделать анимацию элемента через 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, похоже, не всегда нравится, как этот конкретный переход связан. вам может потребоваться удалить его и использовать файл по умолчанию.

...