之前都用jquery实现鼠标浮动到主菜单，滑动展示二级菜单，或者鼠标浮动到搜索上展示搜索框。哪怕是用extjs的时候也单独引入jquery来做选择器做这些动画，其实extjs做这些功能也一样的。
extjs 实现滑动动画展示二级菜单的案例和展示搜索框案例代码
Ext.onReady(function(){
//二级菜单处理///////////////////////////////////////////////////////////
var secondMenu=Ext.get("secondMenuCsot");
var isDisplaySecondMenu=false;
var isMenuAnimation=false;
function toggleSecondMenu(isIn){
isDisplaySecondMenu=isIn;
window.setTimeout(function(){
if(isIn){
if(isDisplaySecondMenu==true&&isMenuAnimation==false&&secondMenu.getStyle("display")=="none"){
isMenuAnimation=true;
secondMenu.slideIn("t",{duration:200,useDisplay:true,callback:function(){
isMenuAnimation=false;
}});
}
}else{
if(isDisplaySecondMenu==false&&isMenuAnimation==false&&secondMenu.getStyle("display")=="block"){
isMenuAnimation=true;
secondMenu.slideOut("t",{duration:200,useDisplay:true,callback:function(){
isMenuAnimation=false;
}});
}
}
},100);
}
secondMenu.hover(
function(){
toggleSecondMenu(true);
},
function(){
toggleSecondMenu(false);
}
);
var navList=Ext.get("navigation").query("ul>li");
for(var i=0;i<navList.length;i++){
var menuItem=Ext.get(navList[i]);
var secondChildList=menuItem.query("ul>li");
if(secondChildList&&secondChildList.length>0){
menuItem.hover(
function(event,item){
secondMenu.child("ul").setHtml(Ext.clone(Ext.get(item).child("ul")).dom.innerHTML);
secondMenu.child("ul").setStyle("margin-left",item.offsetLeft+"px");
secondMenu.setStyle("top",(Ext.get("bannerBottom").getY()-Ext.get(Ext.query("body")[0]).getScrollTop())+"px");
toggleSecondMenu(true);
},
function(){
toggleSecondMenu(false);
}
);
}
}
//搜索框
var searchIcon=Ext.get("searchIcon");
var searchFormContainer=Ext.get("page-search");
var isSearchAnimation=false;
var isDisplaySearchFormContainer=false;
function toggleSearchFormContainer(isIn){
isDisplaySearchFormContainer=isIn;
window.setTimeout(function(){
if(isIn){
if(isDisplaySearchFormContainer==true&&isSearchAnimation==false&&searchFormContainer.getStyle("display")=="none"){
isSearchAnimation=true;
searchFormContainer.slideIn("t",{duration:200,useDisplay:true,callback:function(){
isSearchAnimation=false;
}});
}
}else{
if(isDisplaySearchFormContainer==false&&isSearchAnimation==false&&searchFormContainer.getStyle("display")=="block"){
isSearchAnimation=true;
searchFormContainer.slideOut("t",{duration:200,useDisplay:true,callback:function(){
isSearchAnimation=false;
}});
}
}
},100);
}
searchIcon.hover(
function(){
searchFormContainer.setStyle("top",(searchIcon.getHeight()+searchIcon.getY()-Ext.get(Ext.query("body")[0]).getScrollTop())+"px");
searchFormContainer.setStyle("left",(searchIcon.getX()-218)+"px");
toggleSearchFormContainer(true);
},
function(){
toggleSearchFormContainer(false);
}
);
searchFormContainer.hover(
function(){
toggleSearchFormContainer(true);
},
function(){
toggleSearchFormContainer(false);
}
);
});