javascript - Mootools:如何使用 'mouseenter' 和 'mouseleave' 停止延迟事件

Question

我是 javascript 和 mootols 的新手，我有一个关于使用 Mootools 进行延迟和事件处理的问题。

我的目标:菜单出现在主要位置，然后在一定时间后移动到次要位置并切换不透明度，然后在 mouseenter 上它以完全不透明的方式重新出现在主要位置，在 mouseleave 上它回到次要位置.

我已经解决这个问题一段时间了，我已经阅读了很多演示和问题，但我无法切入正题......我在 mouseenter mouseleave 上遇到了问题(有延迟，因此，如果我将鼠标放在刚刚加载的菜单上一段时间后，菜单就会转到它的次要位置)或者如果我只是将鼠标移入和移出菜单，就会产生困惑。

代码如下:

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

如果我没理解错的话，您缺少的是计时器 ID，然后在开始新的转换之前将其清除。

像这样的东西可能会成功(未经测试):

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