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>