WordPress导航菜单的滚动和淡入淡出效果的实现要点

// 速度来自参数,默认没个时间单位移动 10px
this.speed = speed || 10;
// 设定初始化高度
this.util.setStyle(this.body,'height','0');

expand: function() {
 // 获取当前高度,并整型化
 var height = parseInt(this.util.getStyle(this.body,'height'));
 // 在时间单位内加上速度,直到高度等于或超过最大高度
 height += this.speed;
 if(height >= this.height) {
 height = this.height;
 // 取消循环调用
 clearTimeout(this.tid);
 }
 // 重新设定菜单高度
 this.util.setStyle(this.body,height + 'px');
}
 
/**
 * 折叠菜单,直到高度为 1 时暗藏菜单
 */
collapse:function() {
 // 获取当前高度,'height'));
 // 在时间单位内减去速度,直到高度等于或小于 1
 height -= this.speed;
 if(height <= 1) {
 height = 1;
 // 暗藏菜单
 this.util.setStyle(this.body,'visibility','hidden');
 // 取消循环调用
 clearTimeout(this.tid);
 }
 // 重新设定菜单高度
 this.util.setStyle(this.body,height + 'px');
}

// 获得初始高度,当鼠标在菜单标题上时获得展开时的初始高度,当鼠标在菜单体上时取得菜单的实际高度
var initHeight = this.util.getStyle(this.body,'height');
// 获得实际高度,必须先清空样式的高度,否则只会得到样式中的高度
this.util.setStyle(this.body,'');
this.height = this.util.getHeight(this.body);
// 重新设定初始高度
this.util.setStyle(this.body,initHeight);

// 定义透明度,默认透明
this.opacity = 0;
this.maxopacity = opacity || 1;

/**
 * 激活方法
 * 当鼠标移动到菜单标题是激活
 */
activate: function() {
 // 获取当前菜单体的位置
 var pos = this.util.cumulativeOffset(this.title);
 var left = pos[0];
 var top = pos[1] + this.util.getHeight(this.title);
 
 // 定义激活时样式
 this.util.setStyle(this.body,'left',left + 'px');
 this.util.setStyle(this.body,'top',top + 'px');
 this.util.setStyle(this.body,'visible');
 this.util.setStyle(this.body,'opacity',this.opacity);
 this.util.setStyle(this.body,'filter','alpha(opacity=' + this.opacity * 100 + ')');
 
 if(this.tid) {
 clearTimeout(this.tid);
 }
 // 不断加强菜单的不透明度
 this.tid = setInterval(this.util.bind(this,this.appear),30);
}

/**
 * 加强不透明度,直到最大不透明度
 */
appear: function() {
 this.opacity += 0.1;
 if(this.opacity >= this.maxopacity) {
 this.opacity = this.maxopacity;
 // 取消循环调用
 clearTimeout(this.tid);
 }
 // 重新设定透明度
 this.util.setStyle(this.body,'alpha(opacity=' + this.opacity * 100 + ')');
}

/**
 * 解除方法
 * 当鼠标移动出菜单标题是激活
 */
deactivate: function(){
 if(this.tid) {
 clearTimeout(this.tid);
 }
 // 不断减弱菜单的不透明度
 this.tid = setInterval(this.util.bind(this,this.fade),30);
}

/**
 * 减小不透明度,直到完全透明暗藏菜单
 */
fade:function() {
 this.opacity -= 0.1;
 if(this.opacity <= 0) {
 this.opacity = 0;
 // 暗藏菜单
 this.util.setStyle(this.body,'hidden');
 // 取消循环调用
 clearTimeout(this.tid);
 }
 // 重新设定透明度
 this.util.setStyle(this.body,'alpha(opacity=' + this.opacity * 100 + ')');
}