幫助將此jQuery腳本移植到MooTools

Question

好的，我在網站上使用jQuery腳本時遇到了問題，因為我也在運行MooTools，因此我決定只使用MooTools腳本。

這個jQuery腳本做了一件簡單的事情，它只是使隱藏的div出現在具有淡入淡出效果的鼠標懸停上。我無法編寫jQuery或MooTools的代碼，所以請您提供幫助。 誰能幫助我並將這個jQuery腳本移植到MooTools？

$(document).ready(function () { 
  var hide = false; 
  $("#posts-menu, .submenu").hover(function(){ 
    if (hide) clearTimeout(hide); 
    $(".submenu").fadeIn(); 
  }, function() { 
    hide = setTimeout(function() { 
      $(".submenu").fadeOut("slow"); 
    }, 250); 
  });   
});

Answer 1

    var jq = jQuery.noConflict(); 


jq(document).ready(function () { 
         var hide = false; 
     jq("#posts-menu, .submenu").hover(function(){ 
         if (hide) clearTimeout(hide); 
         jq(".submenu").fadeIn(); 
     }, function() { 
         hide = setTimeout(function() { 
             jq(".submenu").fadeOut("slow"); 
         }, 250); 
     }); 

});

就像jQuery一樣，許多JavaScript庫都將$用作函數或變量名。 在jQuery的情況下，$只是jQuery的別名，因此無需使用$即可使用所有功能。 如果我們需要在jQuery旁邊使用另一個JavaScript庫，則可以通過調用$ .noConflict（）將$的控制權返回給另一個庫：

http://api.jquery.com/jQuery.noConflict/

Answer 2

我是手工編寫的，因此可能需要進行一些調整：

window.addEvent('domready', function(){

  var hide = false;
  $('posts-menu').getElement('.submenu').addEvents({
    mouseenter: function() {
      if (hide) clearTimeout(hide);
      this.fade('in');
    },
    mouseleave: function() {
      hide = setTimeout(function() {
        this.fade('out');
      }, 250);
    }
  });

});

讓我知道它是否有效，或者在http://jsfiddle.net上托管一個示例，它使我們可以更輕松地為您提供幫助。

此外，代替setTimeout嘗試delay方法： http : //mootools.net/docs/core/Types/Function#Function : delay

如果您希望淡入淡出具有更大的靈活性，請嘗試使用tween('opacity')方法： http : //mootools.net/docs/core/Fx/Fx.Tween#Element : tween('opacity')