JS加载顺序:必须先加载jquery.js再加载jquery.easing.1.3.js
$("#menu li").each(function() {
var bg = document.createElement("div");
var txtFrame = document.createElement("div");
var txt = document.createElement("div");
var btn = document.createElement("div");
bg.className = 'move_bg';
bg.style.position = "absolute";
bg.style.top = "-39px";
bg.style.left = "0px";
bg.title=this.title;
txtFrame.className = "move_txtFrame";
txtFrame.style.position = "absolute";
txtFrame.style.top = txtFrame.style.left = "0px";
txtFrame.title=this.title;
if(document.all) {
txt.innerHTML = this.innerText;
}else{
txt.innerHTML = this.textContent;
}
txt.className = "move_txt";
txt.style.position = "absolute";
txt.style.top = "0px";
txt.style.left = "27px";
btn.className = 'move_btn';
btn.style.top = btn.style.left = '0px';
btn.style.position = "absolute";
btn.innerHTML = this.innerHTML;
btn.title=this.title;
this.appendChild(bg);
this.appendChild(txtFrame);
txtFrame.appendChild(txt);
this.appendChild(btn);
})
$(".move_btn").hover(function () {
var hadlon = $(this).parent().children('.move_bg');
var hadltxt = $(this).parent().children('.move_txtFrame');
hadlon.stop(true,true).animate({
top: "0px"
},{duration: 800, easing: "easeOutBounce"});//下移
hadltxt.stop(true,true).slideDown({duration: 800, easing: "easeOutBounce"});//暂停并下移
},function () {
var hadlon = $(this).parent().children('.move_bg');
var hadltxt = $(this).parent().children('.move_txtFrame');
hadlon.stop(true,true).animate({
top: "-39px"
},{duration: 800, easing: "easeOutQuint"});//上移
hadltxt.stop(true,true).slideUp({duration: 800, easing: "easeOutQuint"});//暂停并上移
})
$(".move_btn[title]").fadeOut(0);
$(".move_bg[title]").animate({
top: "0px"
},{duration: 800, easing: "easeOutBounce"});
$(".move_txtFrame[title]").slideDown({duration: 800, easing: "easeOutBounce"});