1110 Jquary动画

Posted 2020-08-19 yanbignqi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1110 Jquary动画相关的知识，希望对你有一定的参考价值。

<script>
        $(function () {
            $("#btn").click(function () {
                //$("#div").hide(2000);        //在2秒内隐藏
                //$("#div").show(2000);        //在2秒内显示
                //$("#div").fadeIn(2000);      //增强元素的不透明度，直至元素完全显示
                //$("#div").fadeOut(2000);     //降低元素的不透明度，直至元素完全消失

                $("#btn").toggle(function () { 
                    $("div").slideDown(2000);     //改变元素的高度，由上至下显示
                    $(this).val("显示")         
                }, function () {
                    $("div").slideUp(2000);       //改变元素的高度，由下至上缩短隐藏
                    $(this).val("隐藏")
                });
            });

            //$("#btn").click(function () {
            //    $("div").fadeTo(600,0.2);       //fadeTo方法适用于在0.6s内透明度是0.2
            //});
        });
    </script>
<body>
 <div id="div" style="width:300px; height:300px;" >1234</div>
    <input type="button" name="name" value="操作动画" id="btn" />
</body>

以上是关于1110 Jquary动画的主要内容，如果未能解决你的问题，请参考以下文章

jquary高级和ajax

jQuary教程1:jQuary的优点和地位