jq基础-滑动动画

121 阅读1分钟
        div {
            display: none;
            width: 200px;
            height: 200px;
            background: yellow;
        }    
    </style>
</head>

<body>
    <div></div>
    <button class="a">动起来</button>
    <script src="./jquery-1.12.4.js"></script>
    
//         slideDown() 可以使元素逐步延伸显示
// slideUp()则使元素逐步缩短直至隐藏

        $('.a').click(function () {
            slideDown()
        })
        function slideDown() {
            /* fast normal slow  */
            $('div').slideDown('slow',slideUp)
        }
        function slideUp() {
            $('div').slideUp('slow', slideDown)
        }

    </script>