js实现菜单栏上下旋转动画效果

原始图片：

当鼠标放到”首页”上时：

< div  id ="menu2"  class ="menu">

                     < ul >

                         < li ><  a  href  ="index.aspx">  首　　页 </ a  ></ li >

                         < li ><  a  href  ="news.aspx">  实时资讯 </ a  ></ li >

                     </ ul >

             </ div >    

      < script  src ="js/jquery-1.7.2.min.js"  type  ="text/javascript"></  script >

       < script  type ="text/javascript"  language  ="javascript">

           var  $jq = jQuery.noConflict();

          $jq(

        $jq(document).ready(  function () {

             /*  1st example     */

             /// wrap inner content of each anchor with first layer and append background layer

            $jq(  "#menu1 li a" ).wrapInner( '<span class="out"></span>'  ).append( '<span class="bg"></span>' );

             // loop each anchor and add copy of text content

            $jq(  "#menu1 li a" ).each( function  () {

                $jq(  '<span class="over">'  + $jq( this ).text() +  '</span>' ).appendTo( this  );

            });

            $jq(  "#menu1 li a" ).hover( function  () {

                 // this function is fired when the mouse is moved over

                $jq(  ".out" ,  this  ).stop().animate({  'top' :  '40px'  }, 250);  // move down - hide

                $jq(  ".over" ,  this  ).stop().animate({  'top' :  '0px'  }, 250);  // move down - show

                $jq(  ".bg" ,  this  ).stop().animate({  'top' :  '0px'  }, 120);  // move down - show

            },  function () {

                 // this function is fired when the mouse is moved off

                $jq(  ".out" ,  this  ).stop().animate({  'top' :  '0px'  }, 250);  // move up - show

                $jq(  ".over" ,  this  ).stop().animate({  'top' :  '-40px'  }, 250);  // move up - hide

                $jq(  ".bg" ,  this  ).stop().animate({  'top' :  '-40px'  }, 120);  // move up - hide

            });

             /*  2nd example     */

            $jq(  "#menu2 li a" ).wrapInner( '<span class="out"></span>'  );

            $jq(  "#menu2 li a" ).each( function  () {

                 try  {

                     var  urlName = window.location.pathname  // 获取当前  URL

                     var  param = urlName.split( "/"  )[1];

                     if  ($jq( this  ).attr( "href" ) == param) {

                        $jq(  this ).attr( "class"  ,  "over" );

                    }

                    $jq(  '<span class="over">'  + $jq( this ).text() +  '</span>' ).appendTo( this  );

                }

                 catch  (e) {

                }

                 finally  {

              }

            });

            $jq(  "#menu2 li a" ).hover( function  () {

                $jq(  ".out" ,  this  ).stop().animate({  'top' :  '40px'  }, 300);  // move down - hide

                $jq(  ".over" ,  this  ).stop().animate({  'top' :  '0px'  }, 300);  // move down - show

            },  function () {

                $jq(  ".out" ,  this  ).stop().animate({  'top' :  '0px'  }, 300);  // move up - show

                $jq(  ".over" ,  this  ).stop().animate({  'top' :  '-40px'  }, 300);  // move up - hide

            });

        })

)

      </ script >