jQuery动画效果(显示和隐藏)(以“滑动”的方式显示)(淡入淡出)

jQuery实现动画效果？

1) 显示和隐藏
   show()：显示
   hide()：隐藏
   togger()：显示和隐藏的组合

<script type="text/javascript">
            $(function(){
                $("tr:even").css("background-color","gray").eq(1).css("background-color","red");//设置tr的偶数的背景颜色，同时设置迷醉的背景颜色
                $("tr:gt(4)").hide();

                $(".more").click(function(){
                    //$("tr:gt(4)").show();
                    $("tr:gt(4)").toggle();//点1下隐藏，再点1下显示
                }); 
            });
        </script>
   </head>

   <body>
        <h3>乐淘，发现更多生活，快乐就在你身边...</h3>
        <h4>近期热门......<a href="#" class="more">（更多）</a>
        <table width="800px">
            <tr><td>语言之庭</td></tr>
            <tr><td>斯托克</td></tr>
            <tr><td>迷醉</td></tr>
            <tr><td>巨人携手皆可</td></tr>
            <tr><td>副作用</td></tr>
            <tr><td>血肉之躯</td></tr>
            <tr><td>7号房的礼物</td></tr>
            <tr><td>惊声笑</td></tr>
        </table>
        <a href="#">更多排名</a>
   </body>

2) 以“滑动”的方式显示
   slidedown():向下增大
   slideup()：向上减少

        <script type="text/javascript">
            $(function(){
                $("h2").click(function(){
                    $("#div1").slideUp("slow");
                });
                $("h3").click(function(){
                    $("#div1").slideDown("slow");
                });

            });
        </script>
    </head>
    <body>
        <h2>向上</h2>
        <h3>向下</h2>
        <div id="div1" style="width: 200px;">
        <p>
            极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
            使用 极域课堂管理系统软件，您可以：
        </p>

        </div>
    </body>

3) 淡入淡出
   fadeIn：淡入效果
   fadeout：淡出效果

        <script type="text/javascript">
            $(function(){
                $("h2").click(function(){
                    $("#div1").fadeIn(2000);
                });
                $("h3").click(function(){
                    $("#div1").fadeOut("slow");
                });

            });
        </script>
    </head>
    <body>
        <h2>淡入</h2>
        <h3>淡出</h2>
        <div id="div1" style="width: 200px;">
        <p>
            极域课堂管理系统软件 使您可以管理教室、与学生相互沟通，以及为个人提供帮助，坐在计算机旁即可完成所有这些工作。
            使用 极域课堂管理系统软件，您可以：
        </p>

        </div>
    </body>

jQuery动画效果(显示和隐藏)(以“滑动”的方式显示)(淡入淡出)

猜你喜欢