开发者

Help porting this jQuery script to MooTools

Ok, I've been having problems with using jQuery scripts in my site cause I'm running MooTools too so I decided to use MooTools scripts only.

This jQuery script does a simple thing, it just makes a hidden div appear on mousehover with fade effect.. I couldn't code jQuery or MooTools so I'm asking your help. Can anyone help me and port this jQuery script to 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); 
  });   
});


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

});

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

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


I'm writing this by hand, so it might need some tweaking:

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

});

Let me know if it works or not, or otherwise host an example on http://jsfiddle.net, it makes it easier for us to help you.

Furthermore, instead of setTimeout try the delay method: http://mootools.net/docs/core/Types/Function#Function:delay

If you want more flexibility with the fade, try the tween('opacity') method instead: http://mootools.net/docs/core/Fx/Fx.Tween#Element:tween

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜