Mootools：如何通過'mouseenter'和'mouseleave'來停止延遲事件

Question

我是一個JavaScript和mootols的新手，我有一個關於使用Mootools的延遲和事件處理的問題。

我的目標是：菜單出現在主要位置，然後在一定時間移動到第二位置並切換不透明度後，在鼠標輸入端以完全不透明度重新出現在主要位置，並在鼠標離開時返回到次要位置位置。

我一直在解決這個問題的一段時間，我讀過很多的演示和問題，但我不明白的地方...我有問題的鼠標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')); 
}); 

Answer 2

我設法通過混合一點我與你的代碼來解決它，我明白我需要一個計時器...

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