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

最新推荐文章于 2024-05-15 12:02:42 发布

可C但是没有必要

最新推荐文章于 2024-05-15 12:02:42 发布

阅读量4.7k

点赞数 2

分类专栏： jQuery 文章标签： jQuery 动画效果

本文链接：https://blog.csdn.net/qq_33442160/article/details/81567164

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

可C但是没有必要

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画效果(显示和隐藏)(以“滑动”的方式显示)(淡入淡出)

jQuery实现动画效果？1) 显示和隐藏 show()：显示 hide()：隐藏 togger()：显示和隐藏的组合&amp;lt;script type=&quot;text/javascript&quot;&amp;gt; $(function(){ $(&quot;tr:even&quot;).css(&quot;background-color&q
复制链接

扫一扫

专栏目录