Mootools: как остановить события задержки с помощью «mouseenter» и «mouseleave»

Question

Я новичок в javascript и mootols, и у меня возник вопрос о задержке и обработке событий с помощью Mootools.

Моя цель: меню появляется в первичной позиции, затем через определенное время перемещается во вторичную позицию и переключает непрозрачность, затем при вводе мыши оно вновь появляется в основной позиции с полной непрозрачностью, а при отпускании мыши оно возвращается во вторичную позицию .

Я уже некоторое время обходил эту проблему, и я прочитал много демонстраций и вопросов, но не могу до конца разобраться ... У меня были проблемы с мышиным концом мыши (которые имеют задержку, поэтому, если я через некоторое время наведу указатель мыши на только что загруженное меню, меню просто перейдет в его второстепенное положение) или на общий хаос, который генерируется, если я просто перемещаю мышь в и из меню.

Вот код:

window.addEvent('domready', function(){
var el = $('menu'),
    color = el.getStyle('backgroundColor');


        // Morphs to secondary style
    var menuHide = function(){
    this.morph({'background-color': '#000000',
   'opacity': 0.6,'margin-top': -43}) };
    menuHide.delay(5000, el);



    $('menu').set('duration', 100).addEvents({

        mouseenter: function(){ 
            // Morphs back to the primary style
                this.morph({
                'opacity': 1.0,
                'background-color': '#B51000',
                'margin-top': 0
            });
        },
        mouseleave: function(){

            // Morphs back to the secondary style
            this.store("timer", (function(){
                            this.morph({
                            'opacity': 0.6,
                            'background-color': '#000000',
                            'margin-top': -43
                            });
            }).delay(2000,this));
        }

    });

Не могли бы вы мне помочь? Я в отчаянии!

Answer 1

Мне удалось это исправить, смешав немного моего кода с вашим, я понял, что мне нужен таймер ...

window.addEvent('domready', function() {
var myMorph = new Fx.Morph($('menu'), {
    duration: 1000,
    link: 'cancel'
});
var timer;
$('menu').addEvents({
    'domready': function() {
        var myDelay1 = function() {
            myMorph.start({
                'opacity': 0.6,
                'background-color': '#000000',
                'margin-top': -43
            });
        };
        timer = myDelay1.delay(5000);
    },
    mouseenter: function() {
        clearTimeout(timer);
        myMorph.start({
            'opacity': 1.0,
            'background-color': '#B51000',
            'margin-top': 0
        });
    },
    mouseleave: function() {
        var myDelay1 = function() {
            myMorph.start({
                'opacity': 0.6,
                'background-color': '#000000',
                'margin-top': -43
            });
        };
        timer = myDelay1.delay(2000);
    }
});});

Answer 2

Если я вас правильно понял, вам не хватает идентификатора таймера, а затем очищаете его перед началом нового перехода.

Что-то подобное может сработать (не проверено):

var Menu = new Class({
    initialize: function(el) {
        this.element = el;
        this.timer = null;

        this.element.set('duration', 100);
        this.element.addEvents({
            mouseenter: this.enter.bind(this),
            mouselave: this.leave.bind(this)
        });

    },
    enter: function() {
        this.stopTimer();
        this.element.morph({
            'opacity': 1.0,
            'background-color': '#B51000',
            'margin-top': 0
        });
    },
    leave: function() {
        this.stopTimer();
        this.timer = this.element.morph({
            'opacity': 0.6,
            'background-color': '#000000',
            'margin-top': -43
        }).delay(2000));
    },
    stopTimer: function() {
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
});

var menu;
window.addEvent('domready', function() {
    menu = new Menu($('menu'));
});