jQuery实现:
$(function(){
var $aLi = $("ul.nav>li");
$aLi.hover(function(){
var i=$aLi.index(this)
$("ul.subNav").eq(i).stop().animate({
height:"120px",
},30)
},function(){
$("ul.subNav").stop().animate({
height:"0px",
},30)
})
i++;
})
$(function(){
var $aLi = $("ul.nav>li");
$aLi.hover(function(){
var i=$aLi.index(this)
$("ul.subNav").eq(i).stop().animate({
height:"120px",
},30)
},function(){
$("ul.subNav").stop().animate({
height:"0px",
},30)
})
i++;
})
aLi[i].onmouseout = function () {
clearInterval(this.time);
var myul=this.lastElementChild,This = this;
This.time=setInterval(function(){
myul.style.height=myul.offsetHeight-8+'px';
if(myul.offsetHeight<=0){
myul.style.height=0;
clearInterval(This.time);
}
},30);
};
clearInterval(this.time);
var myul=this.lastElementChild,This = this;
This.time=setInterval(function(){
myul.style.height=myul.offsetHeight-8+'px';
if(myul.offsetHeight<=0){
myul.style.height=0;
clearInterval(This.time);
}
},30);
};
aLi[i].onmouseover = function (){
clearInterval(this.time);
var myul = this.lastElementChild,This = this;
This.time = setInterval(function () {
myul.style.height = myul.offsetHeight + 8 + 'px';
if (myul.offsetHeight >= 120) {
clearInterval(This.time);
}
},30);
};
clearInterval(this.time);
var myul = this.lastElementChild,This = this;
This.time = setInterval(function () {
myul.style.height = myul.offsetHeight + 8 + 'px';
if (myul.offsetHeight >= 120) {
clearInterval(This.time);
}
},30);
};