首页 > 代码库 > 1110 Jquary动画

1110 Jquary动画

2024-08-20 03:57:23   216人阅读

<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="http://www.mamicode.com/操作动画" id="btn" />
</body>

1110 Jquary动画


联系
我们