Question

好的，我在我的网站上使用jQuery脚本时遇到了问题，因为我也在运行MooTools，所以我决定只使用MooTools脚本。

这个jQuery脚本做了一件简单的事情，它只是让一个隐藏的div出现在mousehover上，具有淡入淡出效果..我无法编写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); 
     }); 

});

许多JavaScript库使用$作为函数或变量名，就像jQuery一样。在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

帮助将此jQuery脚本移植到MooTools

2 个答案: