Mootools： 'mouseenter'と 'mouseleave'で遅延イベントを止める方法

Question

私はjavascriptとmootolsの初心者ですが、私はMootoolsで遅延やイベント処理に関する質問があります。

私の目標：メニューがプライマリポジションに表示されてから、ある時間がセカンダリポジションに移動して不透明度をトグルした後、マウスの位置に完全不透明で元の位置に再び表示され、ポジション。

私はいつかこの問題を回避していますが、私はデモや質問をたくさん読んできましたが、私はそのポイントには到達できません...私はマウスセンターマウスに問題がありました。したがって、メニューをちょうど2番目の位置に移動した直後に、メニューを読み込んだらメニューにマウスを置くと、マウスがメニューの内外に移動した場合に生成される混乱が発生します。ここで

はコードです：

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