<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: burlywood;
        }
    </style>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            //改的是diaplay样式  行内样式 display
            //隐藏 display:none; 显示diaplay:原始值  如果没有原始值 则删除display样式
            $(".show").click(function () {
                // $("div").show();
                // $("div").show(“slow); normal  fast
                $("div").show(1000);// 可以传时间 动画路线是从左上角到右下角
            })
            //hide   display:none;
            $(".hide").click(function () {
                $("div").hide();
            })
            $(".toggle").click(function () {
                $("div").toggle();
            })


            //改的是行内样式 height
            //动画路线是从上到下
            $(".slideDown").click(function () {
                $("div").slideDown();
            })
            $(".slideUp").click(function () {
                $("div").slideUp();
            })  
            $(".slideToggle").click(function () {
                // $("div").stop().slideToggle(3000);删除所有排队的动画 在最后一次动画基础上 继续新动画
                // $("div").finish().slideToggle(3000);删除所有排队的动画 完成所有动画，开始新动画
            })

            //淡入淡出 改的是行内样式 opacity  0<-->1
            $(".fadeIn").click(function () {
                $("div").fadeIn();
            })
            $(".fadeOut").click(function () {
                $("div").fadeOut();
            })  
            $(".fadeToggle").click(function () {
                $("div").fadeToggle();
            })
            $(".fadeTo").click(function () {
                $("div").fadeTo("normal",0.3);
            })


            //自定义动画
            // animate(params,[speed],[easing],[fn]) 的四个值
            // 1.对象，里面穿需要动画的样式
            // 2.speed执行动画时间
            // 3.执行动画效果
            // 4.回调函数
            $(".animate").click(function () {
                // $("div").animate({width:"400px"},1000);
                // $("div").animate({width:"400px",height:"400px",opacity:0.3},1000);
                $("div").animate({width:"+=40px",height:"+=40px",opacity:0.3},1000);

            })
         
        })
    </script>
</head>
<body>
    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>
    <br>
    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>
    <br>
    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo(0.3)</button>
    <br>
    <button class="animate">animate</button>
    <div></div>
</body>
</html>