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)