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', height + 'px');
}
 
/**
 * 折叠菜单, 直到高度为 1 时隐藏菜单
 */
collapse:function() {
 // 获取当前高度, 并整型化
 var height = parseInt(this.util.getStyle(this.body, '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', height + 'px');
}

// 获得初始高度, 当鼠标在菜单标题上时获得展开时的初始高度, 当鼠标在菜单体上时取得菜单的实际高度
var initHeight = this.util.getStyle(this.body, 'height');
// 获得实际高度, 必须先清空样式的高度, 否则只会得到样式中的高度
this.util.setStyle(this.body, 'height', '');
this.height = this.util.getHeight(this.body);
// 重新设定初始高度
this.util.setStyle(this.body, 'height', 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, 'visibility', '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, 'opacity', this.opacity);
 this.util.setStyle(this.body, 'filter', '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, 'visibility', 'hidden');
 // 取消循环调用
 clearTimeout(this.tid);
 }
 // 重新设定透明度
 this.util.setStyle(this.body, 'opacity', this.opacity);
 this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
}