jQuery個性的なトランプ効果ナビゲーションメニューを実現する方法

この例では,jQueryが個性的なトランプ効果ナビゲーションメニューを実現する方法について述べた.皆さんの参考にしてください.具体的な実現方法は以下の通りである.

 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  <br> var nummove=0; 
  <br> var numout=0; 
  <br> $(function(){ 
  <br>     $("#btncell li").hover( 
  <br>         function(){ 
  <br>         if(nummove==0) 
  <br>         { 
  <br>             nummove=1; 
  <br>             $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){nummove=0;}); 
  <br>             $("a",this).animate({ height: "28px",top: "10px"}, 80); 
  <br>             $("a",this).css("background","yellow"); 
  <br>         } 
  <br>             }, 
  <br>             function(){ 
  <br>             if(numout==0) 
  <br>             { 
  <br>             numout=1; 
  <br>             $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;}); 
  <br>             $("a",this).animate({ height: "28px",top: "10px"}, 80); 
  <br>             $("a",this).css("background","#888"); 
  <br>             numout=0; 
  <br>             } 
  <br>             } 
  <br>     ) 
  <br>     $("#btncell li a").click(function(){ 
  <br>         $(this).parents("li").css("z-index","2") 
  <br>         $(this).animate({ height: "558px",top: "-255px",width: "1000px",left: "-460px",opacity: 'toggle',lineHeight: '558px',fontSize: '500px'}, 1000); 
  <br>         $(this).animate({ height: "28px",top: "10px",width: "50px",left: "25px",opacity: 'toggle',lineHeight: '28px',fontSize: '12px'}, 400); 
  <br>         $(this).parents("li").css("z-index","1") 
  <br>     }) 
  <br> }) 
  <br>  
  
  
  
  
  
              ，       ，            。
 
  
   
1
 
  
   
2
 
  
   
3
 
  
   
4
 
  
   
5
 
  
   
6
 
  
 
 
  
  
  
  
  
 
 

本文で述べたことが皆さんのjQueryプログラム設計に役立つことを願っています.