recherche

Maison >interface Web >js tutoriel >jQuery implémente le code du menu pliant secondaire avec un effet de fondu animé_jquery

jQuery implémente le code du menu pliant secondaire avec un effet de fondu animé_jquery

WBOY
WBOYoriginal
2016-05-16 15:36:181313parcourir

L'exemple de cet article décrit l'implémentation jQuery du code du menu pliant secondaire avec effet de fondu sortant animé. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici le code jQuery pour implémenter un menu pliable secondaire avec effet de fondu d'animation. En raison de l'implémentation de la fonction, il n'est pas beaucoup embelli. Cependant, cela peut donner. tout le monde a plus d'espace pour décorer et embellir. Que voulez-vous, faites-le.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-dh-flash-fade-in-out-2-menu-demo/

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<SCRIPT src="jquery1.3.2.js" type=text/javascript></SCRIPT>
<SCRIPT>
$(function(){
 $("a").bind("focus",function(){if(this.blur)this.blur();});
 $("#menu > li:first-child").addClass("first_menu");
 $("#menu > li:first-child.current_page_item, #menu > li:first-child.current-cat").addClass("first_menu_active");
 $("#menu > li:last-child").addClass("last_menu");
 $("#menu > li:last-child.current_page_item, #menu > li:last-child.current-cat").addClass("last_menu_active");
 $("#menu li ul li:has(ul)").addClass("parent_menu");
 $("#right_col ul > li:last-child").css({marginBottom:"0"});
 $("#comment_area ol > li:even").addClass("even_comment");
 $("#comment_area ol > li:odd").addClass("odd_comment");
 $(".even_comment > .children > li").addClass("even_comment_children");
 $(".odd_comment > .children > li").addClass("odd_comment_children");
 $(".even_comment_children > .children > li").addClass("odd_comment_children");
 $(".odd_comment_children > .children > li").addClass("even_comment_children");
 $(".even_comment_children > .children > li").addClass("odd_comment_children");
 $(".odd_comment_children > .children > li").addClass("even_comment_children");
 $("#guest_info input,#comment_textarea textarea")
 .focus( function () { $(this).css({borderColor:"#33a8e5"}) } )
 .blur( function () { $(this).css({borderColor:"#ccc"}) } );
 $(".search_tag").toggle(function(){
 $(".search_tag").addClass("active_search_tag");
 $("#tag_list ul").animate({ opacity: 'show', height:"show" }, {duration:1000 ,easing:"easeOutBack"});
 return false;
 },function(){
 $("#tag_list ul").fadeTo("slow", 0).slideUp("slow").fadeTo("fast", 1);
 $(".search_tag").removeClass("active_search_tag")
 return false;
 });
 $("#trackback_switch").click(function(){
 $("#comment_switch").removeClass("comment_switch_active");
 $(this).addClass("comment_switch_active");
 $("#comment_area").animate({opacity: 'hide'}, 0);
 $("#trackback_area").animate({opacity: 'show'}, 1000);
 return false;
 });
 $("#comment_switch").click(function(){
 $("#trackback_switch").removeClass("comment_switch_active");
 $(this).addClass("comment_switch_active");
 $("#trackback_area").animate({opacity: 'hide'}, 0);
 $("#comment_area").animate({opacity: 'show'}, 1000);
 return false;
 });
 $("#guest_info input,#comment_textarea textarea")
 .focus( function () { $(this).css({borderColor:"#33a8e5"}) } )
 .blur( function () { $(this).css({borderColor:"#ccc"}) } );
 $("blockquote").append('<div class="quote_bottom"></div>');
 $(".side_box:first").addClass("first_side_box");
});
function changefc(color){
 document.getElementById("search_input").style.color=color;
}
/*dropdowm menu*/
var menu=function(){
 var t=15,z=50,s=6,a;
 function dd(n){this.n=n; this.h=[]; this.c=[]}
 dd.prototype.init=function(p,c){
  a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
  for(i;i<l;i++){
   var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
   h.onmouseover=new Function(this.n+'.st('+i+',true)');
   h.onmouseout=new Function(this.n+'.st('+i+')');
  }
 }
 dd.prototype.st=function(x,f){
  var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
  clearInterval(c.t); c.style.overflow='hidden';
  if(f){
   p.className+=' '+a;
   if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
   if(c.mh==c.offsetHeight){c.style.overflow='visible'}
   else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
  }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
 }
 function sl(c,f){
  var h=c.offsetHeight;
  if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
   if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
   clearInterval(c.t); return
  }
  var d=(f==1)&#63;Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
  c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
  c.style.height=h+(d*f)+'px'
 }
 return{dd:dd}
}();
</SCRIPT>
<style type="text/css">
a{text-decoration:none}
.menu ul{
 margin:0 0 0 10px;
 padding:0;
 display:none;
}
.menu ul li{
 height:22px;
 line-height:22px;
 border:none;
}
.menu ul li a{
 font-size:12px;
 font-weight:normal;
 color:#666;
}
.menu ul ul{
 position:absolute;
 z-index:3;
 background:#CC3366;
}
.menu ul ul li{text-indent:10px;padding-right:10px}
.menu ul ul li a{color:#fff}
</style>
</head>
<body>
 <ul class="menu" id="menu">
 <li><a href="#">一级菜单1</a>
 <ul>
 <li><a href="#">二级菜单1</a></li>
 <li><a href="#">二级菜单2</a></li>
 <li><a href="#">二级菜单3</a></li>
 <li><a href="#">二级菜单4</a></li>
 <li><a href="#">二级菜单5</a></li>
 <li><a href="#">二级菜单6</a></li>
 </ul>
 </li> 
 <li><a href="#">一级菜单2</a>
 <ul>
 <li><a href="#">二级菜单1</a>
  <ul>
  <li><a href="#">三级菜单1</a></li>
  <li><a href="#">三级菜单2</a></li>
  </ul>
 </li>
 <li><a href="#">二级菜单2</a></li>
 </ul>
 </li>
 </ul>
 <SCRIPT type=text/javascript> 
 var menu=new menu.dd("menu");
 menu.init("menu","menuhover");
</SCRIPT>
</body>
</html>

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：JS réalise l'effet de mouvement du curseur en réponse aux clics de souris dans les compétences Web games_javascriptArticle suivant：JS réalise l'effet de mouvement du curseur en réponse aux clics de souris dans les compétences Web games_javascript

Articles Liés

Voir plus