JS WordPress fade Fade in navigation menu effect

WordPress with the theme of default based on, only to do learning reference use, modified files have header.php tutorials and style.css tutorials, added Files Js/menu.js

/** class *
var class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

/** Menu List * *
var menulist = Class.create ();
Menulist.prototype = {

/**
* Construction Method
* ID: Menu List
* Opacity: Opacity (0.0-1.0, 0.0 is fully transparent, 1.0 is opaque)
*/
Initialize:function (ID, opacity) {
Get Menu List
This.obj = document.getElementById (ID);
if (!this.obj) {return;}

To process all menus in a menu list
var menus = this.obj.childnodes;
for (var i = 0; i < menus.length; i++) {
var menu = menus[i];
if (menu.tagname = = ' Li ') {
Building Menus
New Menu (menu, opacity);
}
}
}
}

/** Menu * *
var menu = Class.create ();
Menu.prototype = {

/**
* Construction Method
* Target: Target menu
* Opacity: Opacity (0.0-1.0, 0.0 is fully transparent, 1.0 is opaque)
*/
Initialize:function (target, opacity) {
This.util = new Menuutil ();

Get target menu (no extra elements)
This.obj = This.util.cleanwhitespace (target);

/* Shade 2008/09/01 Change Start * *
Define transparency, default transparent
this.opacity = 0;
this.maxopacity = Opacity | | 1;
/* Shade 2008/09/01 change End/*

Get Menu
This.menu = This.obj.childnodes

Important! If the menu does not contain a menu item, it is not processed
if (This.menu.length < 2) {return;}

Menu title and vegetable monomer
This.title = this.menu[0];
This.body = this.menu[1];

Defining the initial Style
This.util.setstyle (this.body, ' visibility ', ' hidden ');
This.util.setstyle (this.body, ' position ', ' absolute ');
This.util.setstyle (this.body, ' overflow ', ' hidden ');
This.util.setstyle (this.body, ' Display ', ' block ');

Add Listener
This.addlistener (this.obj, ' mouseo tutorial ver ', This.util.bind (this, this.activate), false);
This.addlistener (this.obj, ' mouseout ', This.util.bind (this, this.deactivate), false);
},

/**
* Activation method
* When the mouse moves to the menu title is activated
*/
Activate:function () {
Gets the position of the current menu body
var pos = This.util.cumulativeoffset (this.title);
var left = pos[0];
var top = pos[1] + this.util.getheight (this.title);

Define activation-time styles
This.util.setstyle (This.body, ' left ', left + ' px ');
This.util.setstyle (this.body, ' top ', top + ' px ');
This.util.setstyle (this.body, ' visibility ', ' visible ');
This.util.setstyle (This.body, ' opacity ', this.opacity);
This.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');

/* Shade 2008/09/01 Add Start * *
if (This.tid) {
Cleartimeout (This.tid);
}
Continuously enhance the opacity of the menu
This.tid = SetInterval (This.util.bind (this, this.appear), 30);
/* Shade 2008/09/01 Add End * *
},

/**
* Lifting Method
* When the mouse moves out the menu title is activated
*/
Deactivate:function () {
/* Shade 2008/09/01 Add Start * *
if (This.tid) {
Cleartimeout (This.tid);
}
Constantly weakening the opacity of the menu
This.tid = SetInterval (This.util.bind (this, this.fade), 30);
/* Shade 2008/09/01 Add End * *

/* Shade 2008/09/01 Delete Start * *
Define release-Time styles
This.util.setstyle (this.body, ' visibility ', ' hidden ');
/* Shade 2008/09/01 Delete End * *
},

 /* Shade 2008/09/01 Add start */
 /**
  * Enhance opacity until maximum opacity
  */
 appear:func tion () {
  this.opacity + = 0.1;
  if (this.opacity >= this.maxopacity) {
    this.opacity = this.maxopacity;
   //Cancel Loop call
   cleartimeout (This.tid);
  }
  // Reset Transparency
  this.util.setstyle (this.body, ' opacity ', this.opacity);
  this.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');
 },

 /**
  * reduces opacity until fully transparent hides the menu
  */
 fade:function () {
  this.opacity = 0. 1;
  if (this.opacity <= 0) {
   this.opacity = 0;
   //Hide Menu
& Nbsp;  this.util.setstyle (this.body, ' visibility ', ' hidden ');
   //Cancel Loop call
   cleartimeout (This.tid);
  }
  // Reset Transparency
  this.util.setstyle (this.body, ' opacity ', this.opacity);
  this.util.setstyle (This.body, ' filter ', ' alpha (opacity= ' + this.opacity * 100 + ') ');
 },
 /* shade 2008/09/01 Add end */

/**
* Monitoring method
* Element: Listener Object
* Name: Listening method
* Observer: Methods of execution
* Usecapture: How the browser invokes the event (True is capture, false is bubbling)
*/
Addlistener:function (element, name, observer, Usecapture) {
if (Element.addeventlistener) {
Element.addeventlistener (name, observer, Usecapture);
else if (element.attachevent) {
Element.attachevent (' on ' + name, observer);
}
}
}

/** some practical methods * *
var menuutil = Class.create ();
Menuutil.prototype = {
Initialize:function () {
},

$: function (ID) {
return document.getElementById (ID);
},

$a: function (iterable) {
if (!iterable) {
return [];
}
if (Iterable.toarray) {
return Iterable.toarray ();
} else {
var results = [];
for (var i = 0; i < iterable.length; i++) {
Results.push (Iterable[i]);
}
return results;
}
},

Bind:function () {
var array = this. $a (arguments);
var func = array[array.length-1];
var _method = func, args = array, object = Args.shift ();
return function () {
Return _method.apply (object, Args.concat (array));
}
},

Getheight:function (Element) {
return element.offsetheight;
},

Setstyle:function (element, key, value) {
Element.style[key] = value;
},

Getstyle:function (element, key) {
return Element.style[key];
},

Cleanwhitespace:function (list) {
var node = List.firstchild;
while (node) {
var nextnode = node.nextsibling;
if (Node.nodetype = = 3 &&!/s/.test (Node.nodevalue)) {
List.removechild (node);
}
node = NextNode;
}
return list;
},

Cumulativeoffset:function (Element) {
var Valuet = 0, Valuel = 0;
do {
Valuet + + element.offsettop | | 0;
Valuel + + Element.offsetleft | | 0;
element = Element.offsetparent;
while (element);
return [Valuel, Valuet];
}
}

/** add to page Load event * *
Window.onload = function (e) {
New Menulist (' menus ', 0.9);
}