JQ动画 show hide

时间：2021-11-21 21:31:37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //从左到右改变大小

            $("#div1").toggle(function () {

                $(this).show();

            }, function () {

                $(this).hide();

            });

        });

        $(function () {

            $("#btn").click(function () {

                $("#div1").toggle(function () {

                    $(this).fadeOut();

                }, function () {

                    $(this).fadeIn();

                });

            });

        });

    </script>

</head>

<body>

    <div id="div1" style="background-color: Red;">

        上的发生的发生法 上的发生的发生法 上的发生的发生法 上的发生的发生法<br />

        上的发生的发生法 上的发生的发生法 上的发生的发生法 上的发生的发生法<br />

        上的发生的发生法 上的发生的发生法 上的发生的发生法 上的发生的发生法

    </div>

    <input type="button" id="btn" value="点击" />

</body>

</html>

相关文章