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
精彩评论